Роутинги параллелӣ дар NextJS

Дар NextJS имкон дорад, ки ба тавре созем, ки қисме аз сомона мундариҷаи гуногунро вобаста ба URL дархостшуда нишон диҳад. Ин роутинги параллелӣ номида мешавад.

Биёед дар мисол бубинем. Фарз кунем, ки мо макоти зерини сомонаро дорем:

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

Фарз кунем, ки мо мехоҳем, ки дар сарлавҳа маълумоти динамикӣ чоп карда шавад. Фарз кунем, ки дар URL /users компоненти корбарон чоп карда шавад, ва дар URL /posts компоненти паёмҳо чоп карда шавад.

Барои чунин роутинги параллелӣ лозим аст, ки як папкаи махсус сохта шавад, ки номаш бо аломати @ оғоз шавад. Барои мисол папкаи худро @info меномем.

Дар ин папка мо ду компонент ҷойгир мекунем. Якум барои намоиши корбарон дар папкаи /users/, ва дуввум барои намоиши паёмҳо дар папкаи /posts/. Сохтори файлии мо чунин хоҳад шуд:

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

Акнун ба мо дар макоти сомона лозим аст, ки дастури махсуси гузоришро нависем. Барои ин лозим аст ки истифода шавад аз слоти динамикӣ.

Барои он ки фаҳманд, ин чист, аввал бубинед параметри функсияи макоти сомонаи мо:

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

Диққат диҳед, ки параметр ба мо объект интиқол дода мешавад, аз он ки мо мундариҷаи сомонаро ба тағирёбандаи children мегирем.

Дар ин объект метавонад калидҳои дигар низ бошад. Онҳо ба он папкаҳо мувофиқанд, номи онҳо ки мо бо @ оғоз кардем.

Дар ҳолати мо мо папкаи @info дорем, ва ин маъно дорад, ки мо дастрас хоҳем дошт ба тағирёбандаи info, ки вобаста ба URL матни яке аз компонентҳоро дар бар мегирад - корбарон ё паёмҳо. Ин тағирёбандаро мегирем:

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

Акнун дар дохили верстаи макет мо метавонем тағирёбандаи info-ро чоп кунем. Дар ин ҷо вобаста ба URL матни яке аз компонентҳои мо гузориш дода мешавад:

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

Барои панели тарафи рост слоти динамикиро созед.

Барои панели тарафи чап слоти динамикиро созед.