Ich habe Probleme bei der Bereitstellung meiner Next.js 13-App auf Vercel. Ich versuche, die parallele Routing-Funktionalität von Next zu meiner Anwendung hinzuzufügen. Wenn ich Code pushe, um eine neue Pull-Anfrage im GitHub-Repository der App zu stellen, wird die Vercel-Bereitstellung meines Zweigs erfolgreich abgeschlossen, es tritt jedoch ein 500-Fehler auf. Nachdem ich die Vercel-Protokolle überprüft hatte, fand ich die folgende Fehlermeldung:
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
Es scheint, dass das erforderliche Modul während des Bereitstellungsprozesses nicht gefunden werden kann/var/task/.next/server/app/@landing/page.js
.
Dies ist der Inhalt der page.jsx
-Datei im @landing-Ordner:
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;
Dies ist der Inhalt der layout.jsx
-Datei:
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> ); }
Das ist meine next.config.js
Datei:
/** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, experimental: { appDir: true, }, }; module.exports = nextConfig;
Hier sind einige zusätzliche Details zu meinem Setup:
Next.js-Version: 13.12.4 Bereitstellungsplattform: Vercel Repository: GitHub
Ich habe Folgendes versucht:
Ich wäre Ihnen dankbar, wenn Sie mir Einblicke oder Vorschläge zur Lösung dieses Problems geben könnten. Vielen Dank im Voraus für Ihre Hilfe!
这可能是因为您使用的是导出默认值,而不是使用推荐的下一个文档。
在他们的页面中推荐导出如下: