Standard-Slot-Datei in NextJS

In der vorherigen Lektion haben wir einen dynamischen Slot mit dem Namen info erstellt:

app/layout.jsxexport default function RootLayout({children, info}) {
  return (
    <html lang="en">
      <body>
        <header>
          <div>
            {info}
          </div>
        </header>
        <main>
          {children}
        </main>
        <footer>
          footer
        </footer>
      </body>
    </html>
  );
}

Es gibt jedoch ein Problem. Die Sache ist, dass unser Slot nur für zwei Arten von Adressen funktioniert: /users und /posts. Wenn man eine andere Adresse in die Adressleiste eingibt, für die unser Slot nicht definiert ist, dann gibt NextJS einen 404-Fehler aus.

Um das Problem zu lösen, sollte direkt in den Slot-Ordner eine spezielle Datei default.jsx gelegt werden. In dieser Datei sollte eine Komponente sein, die angezeigt wird, wenn in die Adressleiste eine URL eingegeben wird, die nicht für unseren Slot festgelegt ist.

Das heißt, in unserem Fall ergibt sich die folgende Dateistruktur:

• /app//@info/default.jsx/users/page.jsx/posts/page.jsx