ファイルベースルーティング
置き場所が、そのまま住所になる
React実践では、どの URL でどの画面を出すかを自分で書いていました。ルーターに経路を1本ずつ登録する書き方です。Next.js の App Router には、その登録がありません。
代わりに フォルダの形がそのまま URL になります。
app/page.tsx → /
app/about/page.tsx → /about
app/items/page.tsx → /items
app/mypage/listings/page.tsx → /mypage/listingsapp/ の下にフォルダを作り、その中に page.tsx を置く。これだけで新しい URL が生まれます。設定ファイルに追記する作業はありません。
フォルダ名だけでは足りない
大事なのは、URL になるのはフォルダで、ページになるのは page.tsx という点です。app/about/ というフォルダを作っただけでは、/about を開いても何も出ません。中に page.tsx があってはじめて、その URL が表示できるページになります。
逆に言うと、app/about/ の中に AboutCard.tsx のような部品を一緒に置いても、/about/AboutCard という URL は生まれません。page.tsx 以外のファイルは URL になりません。ページと、そのページでしか使わない部品を同じフォルダにまとめて置けるのは、この決まりのおかげです。
page.tsx が返すもの
page.tsx は、関数を1つ export default します。中身はいつもの JSX です。React実践で書いた画面をそのまま貼っても動きます。
なお、ヘッダーのリンクには next/link の Link を使っています。ふつうの a タグと何が違うのかは、あとの回で扱います。
演習
/about のページを作ります。