Parallell routing i NextJS

I NextJS kan man göra så att en del av webbplatsen visar olika innehåll beroende på den begärda URL:en. Detta kallas parallell routing.

Låt oss titta på ett exempel. Antag att vi har följande layout för webbplatsen:

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

Antag att vi vill att dynamisk information skall visas i headern. Låt URL:en /users visa en komponent med användare, och URL:en /posts visa en komponent med inlägg.

För sådan parallell routing behöver man skapa en speciell mapp, som börjar med tecknet @. Låt oss för exemplet döpa vår mapp till @info.

I denna mapp placerar vi två komponenter. Den första för att visa användare i mappen /users/, och den andra för att visa inlägg i mappen /posts/. Vi kommer att få följande filstruktur:

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

Nu behöver vi i webbplatsens layout skriva ett speciellt kommando för infogning. För detta behöver man använda en speciell dynamisk slot.

För att förstå vad detta är, titta först på parametern till vår layoutfunktion:

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

Lägg märke till att parametern är ett objekt, från vilket vi extraherar webbplatsens innehåll till variabeln children.

Det kan finnas andra nycklar i detta objekt. De motsvarar de mappar vars namn vi började med @.

I vårt fall har vi mappen @info, vilket betyder att vi kommer att ha tillgång till variabeln info, som beroende på URL:en innehåller texten från en av komponenterna - användare eller inlägg. Låt oss hämta denna variabel:

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

Nu inuti layoutens utskrift kan vi visa variabeln info. På denna plats kommer, beroende på URL:en, texten från en av våra komponenter att infogas:

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

Skapa en dynamisk slot för den högra sidofältet.

Skapa en dynamisk slot för den vänstra sidofältet.