Párhuzamos útválasztás a NextJS-ben

A NextJS-ben lehetővé tehető, hogy a webhely egy része különböző tartalmat jelenítsen meg a kért URL-től függően. Ezt párhuzamos útválasztásnak nevezzük.

Nézzük meg egy példán keresztül. Tegyük fel, hogy a webhelyünknek a következő elrendezése van:

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

Tegyük fel, hogy a fejlécben dinamikus információkat szeretnénk megjeleníteni. Tegyük fel, hogy a /users URL-en a felhasználók komponense jelenik meg, a /posts URL-en pedig a bejegyzések komponense.

Ehhez a párhuzamos útválasztáshoz létre kell hozni egy speciális mappát, aminek a neve a @ karakterrel kezdődik. A példa kedvéért nevezzük el a mappánkat @info-nak.

Ebben a mappában helyezzünk el két komponenst. Az első a felhasználók megjelenítéséhez a /users/ mappában, a második a bejegyzések megjelenítéséhez a /posts/ mappában. A következő fájlszerkezetet kapjuk:

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

Most a webhely elrendezésében írnunk kell egy speciális parancsot a beillesztéshez. Ehhez egy speciális dinamikus slot-ot kell használni.

Ahhoz, hogy megértsük, mi ez, először nézzük meg a webhely elrendezésünket létrehozó függvény paraméterét:

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

Figyeljük meg, hogy a paraméter egy objektum, amelyből kivonjuk a webhely tartalmát a children változóba.

Ebben az objektumban más kulcsok is lehetnek. Ezek azokhoz a mappákhoz kapcsolódnak, amelyek neve a @ karakterrel kezdődik.

Esetünkben van egy @info mappánk, ami azt jelenti, hogy hozzáférünk egy info változóhoz, amely a URL-től függően az egyik komponens - a felhasználók vagy a bejegyzések - szövegét tartalmazza. Kérjük le ezt a változót:

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

Most az elrendezés belsejében kiírhatjuk a info változót. Ide fog beszúródni a URL-től függően az egyik komponensünk szövege:

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

Készítsen dinamikus slot-ot a jobb oldali oldalsávhoz.

Készítsen dinamikus slot-ot a bal oldali oldalsávhoz.