NextJS에서 동적 라우트

NextJS에서는 동적 라우트를 만들 수 있습니다. 이러한 라우트는 URL의 일부가 임의의 값을 가질 수 있다는 것을 전제로 합니다. 예를 들어, 주소 /users/1를 생각해보세요. 여기서 1 대신 사용자를 식별하는 id에 해당하는 어떤 숫자라도 올 수 있습니다.

이 경우 가능한 모든 숫자에 대해 여러 폴더를 만들 필요가 없습니다. 이 주소 부분을 동적으로 선언하는 것으로 충분합니다. 그러면 이러한 종류의 모든 요청은 공통 파일 page.jsx에 의해 처리됩니다.

동적 매개변수를 만들려면 해당 폴더 이름을 대괄호로 묶어야 합니다. 우리의 경우 폴더 구조는 다음과 같습니다:

/app/
- /users/
  - /[id]/

해당 컴포넌트를 만들어 봅시다:

export default function User() {
	return <p>
		사용자
	</p>;
}

이때 우리가 설정한 매개변수는 특수 객체 params에 저장됩니다. 이 매개변수의 값을 출력해 봅시다:

export default function User({ params }) {
	return <p>
		사용자 {params.id}
	</p>;
}

/city/:name 형식의 주소를 처리하는 라우트를 만드세요. 여기서 :name 자리에는 임의의 문자열이 올 수 있습니다.

/show/:country/:city 형식의 주소를 처리하는 라우트를 만드세요. 여기서 :country와 :city 자리에는 임의의 문자열이 올 수 있습니다.

/post/:id 형식의 주소를 처리하는 라우트를 만드세요. 여기서 :id 자리에는 임의의 숫자가 올 수 있습니다.

다음 배열이 주어져 있습니다:

let posts = [
	'게시물1',
	'게시물2',
	'게시물3',
	'게시물4',
	'게시물5',
];

export default function Post() {
	
}

매개변수 id의 값에 따라 컴포넌트의 마크업에 해당 게시물이 출력되도록 하세요.

/prod/:id 형식의 주소를 처리하는 라우트를 만드세요. 여기서 :id 자리에는 임의의 숫자가 올 수 있습니다.

다음 배열이 주어져 있습니다:

let prods = [
	{
		id: 1,
		name: '제품1',
		cost: 100,
	},
	{
		id: 2,
		name: '제품2',
		cost: 200,
	},
	{
		id: 3,
		name: '제품3',
		cost: 300,
	},
];

export default function Prod() {
	
}

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