我的 Next.js 13 應用程式在 Vercel 上遇到部署問題。我試圖將 Next 的並行路由功能添加到我的應用程式中。當我推送程式碼以在應用程式的 GitHub 儲存庫上發出新的拉取請求時，我的分支的 Vercel 部署成功完成，但遇到 500 錯誤。檢查 Vercel 日誌後，我發現以下錯誤訊息：
Error: Cannot find module '/var/task/.next/server/app/@landing/page.js'
Require stack:
- /var/task/node_modules/next/dist/server/require.js
- /var/task/node_modules/next/dist/server/next-server.js
- /var/task/___next_launcher.cjs
at Module._resolveFilename (node:internal/modules/cjs/loader:1075:15)
at mod._resolveFilename (/var/task/node_modules/next/dist/build/webpack/require-hook.js:23:32)
at Module._load (node:internal/modules/cjs/loader:920:27)
at Module.require (node:internal/modules/cjs/loader:1141:19)
at require (node:internal/modules/cjs/helpers:110:18)
at Object.requirePage (/var/task/node_modules/next/dist/server/require.js:88:12)
at /var/task/node_modules/next/dist/server/load-components.js:49:73
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Object.loadComponentsImpl [as loadComponents] (/var/task/node_modules/next/dist/server/load-components.js:49:26)
at async NextNodeServer.findPageComponentsImpl (/var/task/node_modules/next/dist/server/next-server.js:600:36) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'/var/task/node_modules/next/dist/server/require.js',
'/var/task/node_modules/next/dist/server/next-server.js',
'/var/task/___next_launcher.cjs'
],
page: '/'
}
RequestId: 74d89b96-1db2-4832-a673-a834c04d20ba Error: Runtime exited with error: exit status 1
Runtime.ExitError
部署過程中似乎找不到需要的模組/var/task/.next/server/app/@landing/page.js。
這是 @landing 資料夾內 page.jsx 檔案的內容：
import Link from 'next/link';
import Button from '@/components/Button';
import NavbarIcon from '@/components/NavbarIcons';
const LandingPage = () => {
return (
<main className="w-screen flex flex-col scrollbar-hide bg-white">
<header className="w-full px-6 py-2 flex items-center drop-shadow-md">
<nav className="w-full flex items-center">
<ul className="w-full flex justify-between items-center drop-shadow-md">
<li>
<Link href={'/'}>
<NavbarIcon icon='logo' />
</Link>
</li>
<li>
<ul className='flex gap-4'>
<li>
<Link href={'/auth/login'}>
<Button bgColor="primary" isSolid={true}>
Iniciar Sesión
</Button>
</Link>
</li>
<li>
<Link href={'/auth/register'}>
<Button bgColor="primary" isSolid={false}>
Crear Cuenta
</Button>
</Link>
</li>
</ul>
</li>
</ul>
</nav>
</header>
<article className="w-full h-screen"></article>
<article className="w-full h-screen"></article>
<article className="w-full h-screen"></article>
<article className="w-full h-screen"></article>
</main>
);
};
export default LandingPage;
這是layout.jsx檔案的內容：
import './globals.css';
import { cookies } from 'next/headers';
import Providers from './ReduxContext/provider';
import Navbar from '@/components/Navbar';
export const metadata = {
title: 'Schedulo',
description: 'Improve the way to contact services in our city.',
};
export default function RootLayout({ children, landing }) {
//One way to handle session data is with next 'cookies' function, which use is similar to 'document.coockie'
//We can choice to use other methods mor specific in future to handle users and auths, like firebase hooks.
const coockieList = cookies();
return (
<html>
<head />
<body>
<Providers>
<>
{coockieList.has('userToken') ? (
<main className="relative w-screen max-w-[100vw] h-screen md:h-fit bg-white flex flex-col-reverse md:flex-row">
<Navbar />
{children}
</main>
) : (
landing
)}
</>
</Providers>
</body>
</html>
);
}
這是我的 next.config.js 檔案：
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
experimental: {
appDir: true,
},
};
module.exports = nextConfig;
以下是有關我的設定的一些其他詳細資訊：
Next.js 版本：13.12.4 部署平台：Vercel 儲存庫：GitHub
我已經嘗試過以下操作：
如果您能提供有關如何解決此問題的見解或建議，我將不勝感激。預先感謝您的幫忙！
這可能是因為您使用的是匯出預設值，而不是使用建議的下一個文件。
在他們的頁面中推薦匯出如下：
export default function Page(){ return ( ... ) }