paramsを受け取る
角かっこの中身を受け取る
前回作った app/items/[id]/page.tsx は、どの商品を押しても同じ中身でした。[id] の場所に入った値を使っていないからです。
ページの関数は params という props を受け取ります。ここに、角かっこで付けた名前をキーにした値が入っています。
TypeScript (JSX)
type Props = {
params: Promise<{ id: string }>;
};
export default async function ItemDetailPage({ params }: Props) {
const { id } = await params;
const res = await fetch(`/api/items/${id}`);
const item = await res.json();
return <h1>{item.title}</h1>;
}なぜ await が要るのか
params は Promise です。Next.js 15 から、値そのものではなく「あとで決まるもの」として渡されるようになりました。使うときは await params と書いて中身を開けます。
型も Promise<{ id: string }> と書きます。少し回りくどく見えますが、await を書き忘れたときに型のほうが先に教えてくれるので、書いておく価値があります。
値はいつも文字列
/items/2 の 2 は数値ではなく文字列の "2" です。URL は文字の並びなので当然といえば当然ですが、数として計算に使うときは Number(id) で直します。
今日は取得したい商品の id をそのまま URL に混ぜるだけなので、文字列のまま使えます。
演習
params から id を取り出し、その商品を取得して表示します。