NextJS에서 동적 링크 생성하기

다음과 같은 사용자 데이터 파일이 있다고 가정해 봅시다:

export default users = [
	{
		id: 1,
		name: 'name1',
		surn: 'surn1',
	},
	{
		id: 2,
		name: 'name2',
		surn: 'surn2',
	},
	{
		id: 3,
		name: 'name3',
		surn: 'surn3',
	},
];

두 개의 컴포넌트를 만들어 봅시다. 첫 번째 컴포넌트는 사용자 목록을 보여주고 각 항목을 상세 설명 페이지로 연결하는 링크를 제공합니다. 두 번째 컴포넌트는 해당 상세 설명을 출력합니다.

URL /users/list 로 접속하면 모든 사용자 목록이 표시되고, URL /users/show/:id 로 접속하면 해당 ID를 가진 특정 사용자가 표시되도록 합니다.

이를 위해 다음과 같은 파일 구조를 만듭니다:

/app/
- /users/
  - users.js
  - /list/
    - page.jsx
  - /show/[id]/
    - page.jsx

첫 번째 컴포넌트를 생성하고, 여기서 각 사용자의 id를 링크에 동적으로 삽입하며 루프를 통해 링크를 생성합니다:

import users from '../users.js';
import Link from 'next/link';

export default function List() {
	let list = users.map(user => {
		return <li>
			<Link href={`/users/show/${user.id}`}>
				{user.name}
			</Link>
		</li>;
	});
	
	return <ul>
		{list}
	</ul>;
}

사용자의 id를 기준으로 특정 사용자를 표시하는 컴포넌트를 만듭니다:

import users from '../../users.js';

export default function User({params}) {
	let user = users[params.id];
	
	return <div>
		<span>{user.id}</span>
		<span>{user.name}</span>
		<span>{user.surn}</span>
	</div>;
}

다음 배열이 주어졌습니다:

let prods = [
	{
		id: 1,
		name: 'prod1',
		cost: 100,
		desc: 'desc1',
	},
	{
		id: 2,
		name: 'prod2',
		cost: 200,
		desc: 'desc2',
	},
	{
		id: 3,
		name: 'prod3',
		cost: 300,
		desc: 'desc3',
	},
];

두 개의 컴포넌트를 만드세요. 첫 번째 컴포넌트는 제품 목록을 표시하고 각 항목을 해당 제품의 전체 설명 페이지로 연결하는 링크를 제공합니다. 두 번째 컴포넌트는 제품의 상세 설명을 표시합니다.

URL에 존재하지 않는 제품 ID가 전달되면 화면에 404 오류가 표시되도록 하세요.