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