Domyślny plik slotu w NextJS

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

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

Upewnij się, że dynamiczny slot wyświetla błąd 404, gdy w pasek adresu wpisany jest URL, nie zdefiniowany dla naszego slotu.

Napraw problem z błędem 404.