Oletuspaikatiedosto NextJS:ssä

Edellisessä oppitunnissa teimme dynaamisen paikan nimeltä 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>
	);
}

On kuitenkin ongelma. Asia on siinä, että paikkamme toimii vain kahden tyyppisille osoitteille: /users ja /posts. Jos osoiteriville kirjoitetaan jokin toinen osoite, jolle paikkaamme ei ole määritelty, NextJS näyttää 404 virheen.

Ongelman ratkaisemiseksi tulee suoraan paikan kansioon sijoittaa erityinen tiedosto default.jsx. Tässä tiedostossa tulee olla komponentti, jota näytetään, kun osoiteriville on kirjoitettu URL, joka ei ole määritelty paikallemme.

Eli meidän tapauksessamme saadaan seuraava tiedostorakenne:

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

Varmista, että dynaaminen paikka näyttää 404 virheen, kun osoiteriville on kirjoitettu URL, joka ei ole määritelty paikallemme.

Korjaa 404 virheen ongelma.