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

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

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

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

• /app//prod//[...slugs]/

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

app/prod/[...slugs]/page.jsxexport default function Prod({ params }) {
  console.log(params); // 値の配列
}

page.jsxlet 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,
  },
];