Parallell ruting i NextJS

I NextJS kan man gjøre det slik at en del av nettstedet viser ulikt innhold avhengig av den forespurte URL-en. Dette kalles parallell ruting.

La oss se på et eksempel. Anta at vi har følgende nettstedlayout:

export default function RootLayout({children}) {
	return (
		<html lang="en">
			<body>
				<header>
					header
				</header>
				<main>
					{children}
				</main>
				<footer>
					footer
				</footer>
			</body>
		</html>
	);
}

Anta at vi ønsker at i header-en skal dynamisk informasjon vises. La URL-en /users vise en komponent med brukere, og URL-en /posts en komponent med innlegg.

for slik parallell ruting må man lage en spesiell mappe, som starter navnet med tegnet @. for eksempel, la oss kalle mappen vår @info.

I denne mappen plasserer vi to komponenter. Den første for å vise brukere i mappen /users/, og den andre for å vise innlegg i mappen /posts/. Vi vil få følgende filstruktur:

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

Nå må vi i nettstedlayouten skrive en spesiell kommando for innsetting. For dette må man bruke et spesielt dynamisk spor.

for å forstå hva dette er, se først på parameteren til layout-funksjonen vår:

export default function RootLayout({children}) {
	return (
		
	);
}

Legg merke til at parameteren er et objekt, hvorfra vi henter nettstedets innhold i variabelen children.

Det kan være andre nøkler i dette objektet. De tilsvarer de mappene hvis navn vi startet med @.

I vårt tilfelle har vi mappen @info, noe som betyr at vi vil ha tilgang til variabelen info, som avhengig av URL-en vil inneholde teksten til en av komponentene - brukere eller innlegg. La oss hente denne variabelen:

export default function RootLayout({children, info}) {
	return (
		
	);
}

Nå inne i layoutens kode kan vi vise variabelen info. På dette stedet, avhengig av URL-en, vil teksten til en av komponentene våre blitt satt inn:

export default function RootLayout({children, info}) {
	return (
		<html lang="en">
			<body>
				<header>
					<div>
						{info}
					</div>
				</header>
				<main>
					{children}
				</main>
				<footer>
					footer
				</footer>
			</body>
		</html>
	);
}

Lag et dynamisk spor for høyre sidepanel.

Lag et dynamisk spor for venstre sidepanel.