Fichier de slot par défaut dans NextJS

Dans la leçon précédente, nous avons créé un slot dynamique nommé 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>
  );
}

Il y a, cependant, un problème. Le fait est que notre slot ne fonctionne que pour deux types d'URL : /users et /posts. Si on saisit dans la barre d'adresse une autre URL, pour laquelle notre slot n'est pas défini, alors NextJS affichera une erreur 404.

Pour résoudre le problème, il faut placer directement dans le dossier du slot un fichier spécial default.jsx. Ce fichier doit contenir un composant qui sera affiché lorsque une URL non définie pour notre slot est saisie dans la barre d'adresse.

Autrement dit, dans notre cas, nous obtiendrons la structure de fichiers suivante :

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