Standard slot-fil i NextJS

I föregående lektion skapade vi en dynamisk slot med namnet info:

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>
  );
}

Det finns dock ett problem. Saken är den att vår slot endast fungerar för två typer av adresser: /users och /posts. Om man skriver in en annan adress i adressfältet, för vilken vår slot inte är definierad, kommer NextJS att ge ett 404 fel.

För att lösa problemet bör man direkt i mappen med sloten lägga en speciell fil default.jsx. I den här filen ska det finnas en komponent som visas när en URL som inte är specificerad för vår slot skrivs in i adressfältet.

Så i vårt fall blir filstrukturen följande:

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