← Next.js コース
2. page.tsx — フォルダをページにする
フォルダを作っただけでは、まだページとして表示されません。フォルダの中に page.tsx という名前のファイルを置き、コンポーネントを default export すると、それがそのフォルダの URL のページの中身になります。
ファイル名は page.tsx 固定です。app/about/index.tsx や app/about.tsx を作っても URL にはならないので、必ず「フォルダ + page.tsx」の組み合わせで作ると覚えてください。
逆に言えば、page.tsx のないフォルダは URL として公開されません。部品やユーティリティのファイルをページのフォルダの隣に置いても、勝手にページになる心配はありません。
サンプルコード(フレームワーク環境が必要なため表示のみ)
// app/about/page.tsx → /about ページになる
export default function AboutPage() {
return (
<main>
<h1>About</h1>
<p>このファイルを置くだけで /about ページになります。</p>
</main>
);
}
// ❌ app/about/index.tsx や app/about.tsx はページにならない
// ✅ 「フォルダ + page.tsx」の組み合わせだけがページになる