Fișierul slot implicit în NextJS

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

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

Asigurați-vă că slotul dinamic afisează eroarea 404 atunci când în bara de adrese este introdus un URL, nedefinit pentru slotul nostru.

Remediați problema cu eroarea 404.