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 と名付けます。

このフォルダ内に 2 つのコンポーネントを配置します。ユーザー表示用のものを /users/ フォルダに、投稿表示用のものを /posts/ フォルダに配置します。次のようなファイル構造になります：

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

次に、サイトレイアウト内に挿入するための特別なコマンドを記述する必要があります。そのためには、特別な動的スロットを使用します。

まず、これを理解するために、レイアウト関数のパラメータを見てみましょう：

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

パラメータとしてオブジェクトが渡され、そこからサイトコンテンツを children 変数に抽出していることに注意してください。

このオブジェクトには他のキーも存在する可能性があります。それらは、名前が @ で始まるフォルダに対応します。

このケースでは @info フォルダがあるため、 URL に応じてユーザーまたは投稿コンポーネントのいずれかのテキストを含む変数 info が利用可能になります。この変数を取得しましょう：

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>
	);
}

右サイドバーの動的スロットを作成してください。

左サイドバーの動的スロットを作成してください。