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

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

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

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

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

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

export default function User() {
	return <p>
		user
	</p>;
}

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

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

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

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

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

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

let posts = [
	'post1',
	'post2',
	'post3',
	'post4',
	'post5',
];

export default function Post() {
	
}

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

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

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

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

export default function Prod() {
	
}

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