Domyślny plik slotu w NextJS

W poprzedniej lekcji zrobiliśmy dynamiczny slot o nazwie 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>
  );
}

Jest jednak problem. Chodzi o to, że nasz slot działa tylko dla dwóch typów adresów: /users i /posts. Jeśli wpisać w pasek adresu inny adres, dla którego nasz slot nie jest zdefiniowany, to NextJS wyświetli błąd 404.

Dla rozwiązania problemu bezpośrednio w folderze ze slotem należy umieścić specjalny plik default.jsx. W tym pliku powinien być komponent, który będzie wyświetlany, gdy w pasek adresu wpisany jest URL, nie zdefiniowany dla naszego slotu.

Czyli w naszym przypadku otrzymamy następującą strukturę plików:

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