Alapértelmezett slot fájl NextJS-ben

Az előző leckében készítettünk egy dinamikus slotot a info névvel:

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

Van azonban egy probléma. Az a helyzet, hogy a slotunk csak két típusú címre működik: /users és /posts. Ha egy másik címet írunk be a címsorba, amelyre a slotunk nincs definiálva, akkor a NextJS 404 hibát ad vissza.

A probléma megoldásához közvetlenül a slot mappájába kell elhelyezni egy különleges default.jsx fájlt. Ennek a fájlnak egy olyan komponenst kell tartalmaznia, amely akkor jelenik meg, amikor a címsorba egy olyan URL-t írnak, amely nincs megadva a slotunk számára.

Tehát a mi esetünkben a következő fájlstruktúra jön létre:

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