こんにちは、かつコーチです。
前回はappディレクトリの中身を見ながら、page.tsxとlayout.tsxがどんな役割を持つファイルなのかを軽く紹介しました。
今回はその中でもpage.tsxにフォーカスして、Next.jsの大きな特徴であるファイルベースルーティングの仕組みを詳しく解説していきます。
Reactシリーズでreact-routerのようなライブラリを使ってルーティングを組んだ経験がある人は、その手間との違いに驚くはずです。
ファイルベースルーティングとは？
フォルダ構成がそのままURLになる仕組み
ファイルベースルーティングとは、appディレクトリの中のフォルダ構成に応じて、自動的にページのURLが決まる仕組みのことです。
Reactの素の状態では、「どのURLでどのコンポーネントを表示するか」を、react-routerなどのライブラリを使って自分で設定する必要がありました。
Next.jsでは、そのような設定ファイルを書かなくても、フォルダを作ってpage.tsxを置くだけで、そのままページが1つ増えます。
page.tsxが「ページの入り口」になる
ルーティングの基本ルールはシンプルです。
appディレクトリ内のフォルダ名が、そのままURLのパスになる- そのフォルダの中に置いた
page.tsxが、そのURLで実際に表示される中身になる
つまり、page.tsxという名前のファイルが、「このフォルダはページとして公開します」という目印の役割を果たしています。
基本の書き方・実装手順
手順1：トップページの確認
まずは、すでにあるapp/page.tsxを確認しましょう。
// app/page.tsx → URL "/" に対応
export default function HomePage() {
return (
<main>
<h1>トップページ</h1>
</main>
);
}
appディレクトリ直下のpage.tsxは、サイトのルート、つまりhttp://localhost:3000/に対応します。
手順2：新しいページを追加する（aboutページ）
次に、/aboutというURLでアクセスできるページを追加してみましょう。
appディレクトリの中にaboutというフォルダを作り、その中にpage.tsxを作成します。
app/
├── page.tsx ← "/"
└── about/
└── page.tsx ← "/about"
// app/about/page.tsx
export default function AboutPage() {
return (
<main>
<h1>かつコーチについて</h1>
<p>プログラミング初中級者向けに技術記事を書いています。</p>
</main>
);
}
これだけで、http://localhost:3000/aboutにアクセスすると、このAboutPageコンポーネントが表示されます。
react-routerのようにルーティング用の設定ファイルを別途書く必要がないのが、ファイルベースルーティングの大きなメリットです。
手順3：さらに階層を深くする（blog配下のページ）
フォルダを入れ子にすれば、URLの階層もそのまま深くなります。
app/
└── blog/
└── news/
└── page.tsx ← "/blog/news"
// app/blog/news/page.tsx
export default function BlogNewsPage() {
return (
<main>
<h1>お知らせ一覧</h1>
</main>
);
}
フォルダの階層構造が、そのままURLの階層構造と対応している、という感覚をつかんでおくと、この後の動的ルート（[id]のようなパラメータ付きページ）を学ぶ際もスムーズです。
動的ルートについては、このシリーズの後半で改めて扱います。
つまずきやすい設定・注意点
page.tsxという名前は変更できない
ここで注意しておきたいのが、ファイル名は必ずpage.tsxにする必要がある、という点です。
❌ Before：わかりやすさを優先してファイル名を変えてしまう
app/
└── about/
└── AboutPage.tsx ← page.tsxではないため認識されない
このように、独自の名前を付けてしまうと、Next.jsはそのファイルを「ページ」として認識してくれません。
✅ After：必ずpage.tsxという名前にする
app/
└── about/
└── page.tsx ← 正しくルーティングされる
私自身、Reactのコンポーネントファイルの命名規則（AboutPage.tsxのようにパスカルケースで書く習慣）が体に染み付いていたため、最初のうちは何度もpage.tsxという名前を忘れて、真っ白な画面（404ページ）に遭遇していました。
Next.jsではpage.tsx・layout.tsxのような予約されたファイル名が複数存在し、それぞれ役割が決まっています。
「Next.jsのファイル名は、自分で自由に決めるものではなく、フレームワークが決めた命名ルールに従うもの」と意識しておくと、こうした勘違いを防げます。
フォルダを作ってもpage.tsxがなければページにならない
もう1つの注意点として、フォルダだけ作ってpage.tsxを置き忘れると、そのURLにアクセスしても404ページが表示されます。
新しいページを作るときは、「フォルダを作る」と「page.tsxを置く」の2つをセットで行う、と覚えておきましょう。
まとめ
この記事のポイント
- ファイルベースルーティングは、
appディレクトリのフォルダ構成がそのままURLになる仕組み - URLの中身を表示する実体は、各フォルダに置く
page.tsxというファイル - フォルダを入れ子にすれば、URLの階層もそのまま深くなる
- ファイル名は必ず
page.tsxにする必要があり、独自の名前を付けるとページとして認識されない
次に読むべき記事
page.tsxによるルーティングの基本が理解できたところで、次回は前々回に少し触れたlayout.tsxについて、共通レイアウトの作り方を詳しく解説します。
→ 次の記事：layout.tsxで共通レイアウトを作る