File Slot Predefinito in NextJS

Nella lezione precedente abbiamo creato uno slot dinamico con il nome 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>
  );
}

C'è, tuttavia, un problema. Il fatto è che il nostro slot funziona solo per due tipi di indirizzi: /users e /posts. Se invece si digita nella barra degli indirizzi un altro indirizzo, per il quale il nostro slot non è definito, allora NextJS restituirà un errore 404.

Per risolvere il problema, direttamente nella cartella dello slot si deve inserire un file speciale default.jsx. In questo file ci dovrebbe essere un componente che verrà visualizzato quando nella barra degli indirizzi viene digitato un URL non previsto per il nostro slot.

Quindi nel nostro caso risulterà la seguente struttura di file:

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