ページを切る

画面の数だけ、フォルダを増やす

前の回で /about を1枚作りました。やることは何枚でも同じです。fleama に要る画面を、そのままフォルダとして並べていきます。

第1章の移行計画で書いた表と同じです。計画表がそのままフォルダの形になるので、迷う場面がありません。

データはページの外に置く

商品の一覧は、一覧ページでも詳細ページでもマイページでも使います。同じ配列を3か所に書き写すと、値段を直すときに直し漏れます。

そこで data/items.ts に1回だけ書き、必要なページから import します。app/ の外に置いてよいのかと迷いますが、問題ありません。URL になるのは app/ の下の page.tsx だけなので、それ以外のフォルダはふつうの置き場所として自由に使えます。

app/items/page.tsx から見ると data/ は2つ上なので、../../ になります。フォルダが深くなるほどこの点が増えるので、実務では @/data/items のような別名を設定することが多いです。

型も一緒に置く

data/items.ts は Item 型も export しています。データと型を同じファイルに置いておくと、使う側は1行の import で両方受け取れます。

演習

fleama の主要な3ページを作ります。