NextJS에서 동적 라우트

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

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

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

/app//users//[id]/

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

app/users/[id]/page.jsxexport default function User() {
  return <p>
    사용자
  </p>;
}

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

app/users/[id]/page.jsxexport default function User({ params }) {
  return <p>
    사용자 {params.id}
  </p>;
}

Задание 1

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

Задание 2

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

Задание 3

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

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

page.jsxlet posts = [
  '게시물1',
  '게시물2',
  '게시물3',
  '게시물4',
  '게시물5',
];

export default function Post() {
  
}

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

Задание 4

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

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

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

export default function Prod() {
  
}

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