NextJSの動的ルートにおけるセグメント配列

必要に応じて、すべてのセグメントを一つの変数として配列で取得することができます。そのためには、パラメータを角括弧で囲み、パラメータ名の前に三点リーダーを置きます。例を見てみましょう。

次の形式のルートがあるとします： /prod/:category/:name/:id/、ここでコロンでマークされたパラメータは動的です。これらのパラメータの値を何らかの変数に配列として取得してみましょう。この変数の名前は任意です。例えば、slugsと名付けます。

次のようなファイル構造を作成します：

/app/
- /prod/
  - /[...slugs]/

対応するコンポーネントを作成します：

export default function Prod({ params }) {
	console.log(params); // 値の配列
}

/prod/:category/:name の形式のアドレスを処理するルートを作成してください。

次の配列が与えられているとします：

let prods = [
	{
		category: 'catg1',
		name: 'prod1',
		cost: 100,
	},
	{
		category: 'catg1',
		name: 'prod2',
		cost: 200,
	},
	{
		category: 'catg2',
		name: 'prod1',
		cost: 300,
	},
	{
		category: 'catg2',
		name: 'prod3',
		cost: 400,
	},
];

コンポーネントのレンダリングにおいて、パラメータの値に応じて対応する製品が表示されるようにしてください。