つくる - 静的ページ移植

地図どおりに、骨格を置く

第1章の最後に書いた移行計画表を、そのままファイルにします。新しい概念はありません。第2章で覚えた決まりを4枚ぶん繰り返すだけです。

ヘッダーのナビゲーションは書いてあります。Link と usePathname を使い、現在地に印が付く形です。中身の無いページに移ろうとしても何も出ないので、埋めていくと画面がつながっていきます。

骨格とは何か

ここで作るのは骨格だけです。出品フォームの入力欄も、商品の詳細ページも、まだ作りません。URL とファイルの対応が全部そろっている状態を先に作ることに意味があります。

対応がそろっていれば、あとの章で足すのは中身だけになります。逆に中身から作り始めると、置き場所を決め直すたびに import のパスが崩れます。

詰まったときの見方

ページが出ないときに見る順番は次のとおりです。

1. フォルダの名前が URL と一致しているか
2. その中のファイル名が page.tsx になっているか
3. その中で関数を export default しているか
4. data/ までの ../ の数が合っているか

この4つでほとんどが片付きます。

演習

fleama の全ページ骨格を並べます。