NextJSでのダイナミックルーティング

NextJSではダイナミックルートを作成することができます。このようなルートは、URLの一部が任意の値を持つことを想定しています。例として、/users/1というアドレスを考えます。ここで1の代わりには任意の数字（技術的には表示したいユーザーのidに対応する）が入ります。

この場合、考えられるすべての数字に対して個別のフォルダを作成する必要はありません。アドレスのこの部分を動的に宣言するだけで十分です。これにより、この形式のすべてのリクエストは共通のファイルpage.jsxによって処理されます。

ダイナミックパラメータを作成するには、対応するフォルダ名を角括弧で囲みます。今回のケースでは、以下のようなフォルダ構造になります：

/app//users//[id]/

対応するコンポーネントを作成しましょう：

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

設定したパラメータは、特別なオブジェクトparamsに格納されます。このパラメータの値を表示してみましょう：

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

Задание 1

/city/:nameという形式のアドレス（:nameの部分は任意の文字列）を処理するルートを作成してください。

Задание 2

/show/:country/:cityという形式のアドレス（:countryと:cityの部分は任意の文字列）を処理するルートを作成してください。

Задание 3

/post/:idという形式のアドレス（:idの部分は任意の数字）を処理するルートを作成してください。

以下の配列が与えられているとします：

page.jsxlet posts = [
  'post1',
  'post2',
  'post3',
  'post4',
  'post5',
];

export default function Post() {
  
}

パラメータidの値に応じて、コンポーネントのレンダリングで対応する投稿が表示されるようにしてください。

Задание 4

/prod/:idという形式のアドレス（:idの部分は任意の数字）を処理するルートを作成してください。

以下の配列が与えられているとします：

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

export default function Prod() {
  
}

パラメータidの値に応じて、コンポーネントのレンダリングで対応する商品が表示されるようにしてください。