The Default Slot File in NextJS

In the previous lesson, we created a dynamic slot named 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>
  );
}

However, there is a problem. The point is that our slot only works for two types of addresses: /users and /posts. If you type a different address into the address bar, for which our slot is not defined, then NextJS will throw a 404 error.

To solve the problem, you should place a special file default.jsx directly into the slot folder. This file should contain a component that will be shown when a URL not specified for our slot is entered into the address bar.

That is, in our case, the following file structure will be created:

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