Next.jsのページの作りと構成

業務で使う必要が生じたので、Node.jsとNext.jsを勉強中。
ClaudeCodeなどを使えば書き方を知らなくてもある程度のものは作れてしまいますが、
それだと詰まったときに解決できないのである程度は知識として持っておく必要がある。

なので、勉強がてらのメモ。

トップページはpage.tsx

普通のHTMLやphpの構成だと、トップページはindex.htmlやindex.phpになる場合が多い。
しかし、NodeとNextの構成だと、

src
-app
--page.tsx（これがトップページの扱い）

という感じになる。

下層ページの作り方

では、下層ページはどう作るのかというと、

/*  悪い例  */
src
-app
--page.tsx（トップページ）
--about.tsx（aboutページ）

こんな感じで作るのか？
と思ってしまうが、実際はこうなる。

/*  良い例  */
src
-app
--page.tsx（トップページ）
--about
---page.tsx（aboutのページ）

ワードプレスなどでよくある、
ドメイン/about/でaboutページが表示されるようなイメージでいるとわかりやすい。
htmlとかphpでやる場合は、

index.html
-about
--index.html

って書くみたいな感じ。