動的ルート

商品の数だけファイルは作れない

fleama の商品詳細は /items/1 /items/2 /items/3 と続きます。フォルダ名がそのまま URL になる決まりなので、素直に考えると商品の数だけフォルダが要ることになります。商品が1000件になったら破綻します。

Next.js はここに逃げ道を用意しています。フォルダ名を角かっこで囲むと、その部分が「なんでも受け付ける場所」になります。

このファイル1つで、/items/1 も /items/2 も /items/9999 も表示されます。角かっこの中の id は自分で決める名前で、次のレッスンで値を取り出すときに使います。

静的な部分が優先される

app/items/new/page.tsx と app/items/[id]/page.tsx が両方あるとき、/items/new はどちらでしょうか。答えは new のほうです。角かっこの無い、はっきり書かれたフォルダが先に見られます。

出品ページを /items/new に置いても、商品 id が new の商品と取り違えられる心配はありません。

名前の付け方

角かっこの中の名前は、その値の意味に合わせます。商品なら [id]、ユーザー名なら [username]、記事のスラッグなら [slug] です。この名前がそのまま受け取るときのキーになるので、あとから読む人が困らないものを選びます。

演習

app/items/[id]/page.tsx を書いて、どの商品 id でも同じページが出ることを確かめます。