The Default Slot File in NextJS

In the previous lesson, we created a dynamic slot named info:

export 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

Make sure that the dynamic slot returns a 404 error when a URL not specified for our slot is entered into the address bar.

Fix the problem with the 404 error.