Fișierul slot implicit în NextJS

În lecția precedentă, am creat un slot dinamic cu numele 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>
  );
}

Există, totuși, o problemă. Ideea este că slotul nostru funcționează doar pentru două tipuri de adrese: /users și /posts. Dacă introducem în bara de adrese o altă adresă, pentru care slotul nostru nu este definit, atunci NextJS va afișa eroarea 404.

Pentru a rezolva problema, direct în directorul cu slot, trebuie plasat un fișier special default.jsx. În acest fișier trebuie să fie o componentă care va fi afișată atunci când în bara de adrese este introdus un URL, nedefinit pentru slotul nostru.

Adică, în cazul nostru, va rezulta următoarea structură de fișiere:

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