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

매개변수 값에 따라 컴포넌트의 마크업에 해당하는 제품이 출력되도록 만드세요.