Standaard slotbestand in NextJS

In de vorige les hebben we een dynamische slot gemaakt met de naam 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>
	);
}

Er is echter een probleem. Het zit zo dat onze slot alleen werkt voor twee soorten adressen: /users en /posts. Als je een ander adres in de adresbalk intypt, waarvoor onze slot niet is gedefinieerd, dan geeft NextJS een 404-fout.

Om het probleem op te lossen, moet je direct in de map met de slot een speciaal bestand default.jsx plaatsen. In dit bestand moet een component staan die wordt weergegeven wanneer een URL in de adresbalk is ingetypt die niet is ingesteld voor onze slot.

In ons geval resulteert dat in de volgende bestandsstructuur:

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

Controleer of de dynamische slot een 404-fout geeft wanneer een URL in de adresbalk is ingetypt die niet is ingesteld voor onze slot.

Los het probleem met de 404-fout op.