⚡

[Next.js] page.tsxについて

に公開
2026/09/25
Next.js
TypeScript
frontend
初心者向け
tech

🌱 はじめに

Next.jsの学習の為に、下記書籍を読みました。
本書で Next.js のルーティング（page.tsx）について学びがあったので、執筆します。

🌱 Next.js のページ構造について

Next.js には、Pages Router と App Router の2種類のルーティング方式があります。

Pages Router では、ルートディレクトリまたはsrcディレクトリ内のpagesフォルダにページを配置します。
このフォルダ内に配置されたファイルは、自動的に URL ルートにマッピングされます。
例えば、pages/about.tsx ファイルは /about というルートに対応します。

Next.js 13 からは、アプリディレクトリ（app ディレクトリ）を使ってページやレイアウトを構築する App Router が導入されました（13.4 で安定版）。
App Router では、フォルダが URL のパスになり、その中のpage.tsxがページとして公開されます。
例えば、app/sample/page.tsx ファイルは /sample というルートに対応します。
現在のcreate-next-appでは、App Router が既定です。

🌱 やり方

1. page.tsx の作成

下記コマンドを実行し、sampleディレクトリとpage.tsxを作成します。

mkdir -p src/app/sample
touch src/app/sample/page.tsx

実行結果は、下記の通りです。
（sample以外のファイルは、プロジェクト作成時の選択によって異なります）

src
└── app
    ├── sample
    │   └── page.tsx
    ├── favicon.ico
    ├── globals.css
    ├── layout.tsx
    ├── page.module.css
    └── page.tsx

2. page.tsx のコーディング

下記のようにpage.tsxを編集します。

src/app/sample/page.tsx
export default function Page() {
  return (
    <div>こちらは、sampleディレクトリーに配置したpage.tsxです。</div>
  )
}

3. 動作確認

下記コマンドを実行し、プロジェクトを起動します。

npm run dev

http://localhost:3000/sample にアクセスすると、下記のように表示されます。

next-js-page

GitHubで編集を提案

Discussion