next.js学習記録

Next.js App Routerでページを作る方法【初心者向け完全ガイド】

yuya_react

はじめに

こんにちは、優也@月収100万を目指して月100時間勉強する男です。

Next.js App Routerは、フォルダ構造でページを作れる画期的な機能です。従来のReactではReact Routerを使って複雑な設定が必要でしたが、Next.js App Routerなら、フォルダを作ってpage.tsxを置くだけで自動的にページができます。

しかし、「どうやってページを作るの?」「フォルダ構造がよく分からない」と悩む初心者の方も多いはずです。

この記事では、Next.js App Routerを使ったページ作成方法を、実例を交えながら初心者向けに丁寧に解説します。

Next.js App Routerとは?

Next.js App Routerは、Next.js 13から導入された新しいルーティング方式です。

App Routerの特徴

フォルダ構造 = URL構造になります:

app/
├── page.tsx             → /
├── about/
│   └── page.tsx         → /about
├── blog/
│   └── page.tsx         → /blog
└── contact/
    └── page.tsx         → /contact

フォルダを作るだけで、自動的にルート(URL)が生成されます。

詳しくはNext.js公式ドキュメント – Routingをご覧ください。

Pages Routerとの違い

Next.jsには、旧方式のPages Routerもあります。

項目Pages RouterApp Router
フォルダpages/app/
ファイル名about.tsxabout/page.tsx
導入時期Next.js 初期からNext.js 13から
推奨❌ 旧方式✅ 最新方式

2025年現在、Next.js App Routerが推奨されています。

Next.js App Routerの基本ルール

Next.js App Routerでページを作る際の基本ルールです。

ルール1: フォルダ名 = URL

app/about/ → /about
app/blog/ → /blog
app/products/ → /products

フォルダ名がそのままURLになります。

ルール2: page.tsxが必須

app/about/page.tsx → /about で表示
app/about/layout.tsx → 表示されない(レイアウト用)

page.tsxというファイル名でないと、ページとして認識されません。

ルール3: ネスト可能

app/blog/page.tsx → /blog
app/blog/post-1/page.tsx → /blog/post-1
app/blog/post-2/page.tsx → /blog/post-2

フォルダを階層化できます。

実際にページを作ってみる

Next.js App Routerを使って、実際にページを作成しましょう。

Step 1: Aboutページの作成

プロジェクトのsrc/app/フォルダ内に、aboutフォルダを作成してください。

その中にpage.tsxを作成し、以下のコードを記述します:

export default function About() {
  return (
    <div>
      <h1>About Page</h1>
      <p>これはAboutページです。</p>
      <p>Next.js App Routerで作成しました。</p>
    </div>
  );
}

ブラウザでhttp://localhost:3000/aboutを開いてください。

「About Page」と表示されれば成功です!

Step 2: Contactページの作成

同様に、contactフォルダを作成し、その中にpage.tsxを作成します:

export default function Contact() {
  return (
    <div>
      <h1>Contact Page</h1>
      <p>お問い合わせページです。</p>
      <form>
        <div>
          <label>お名前:</label>
          <input type="text" />
        </div>
        <div>
          <label>メールアドレス:</label>
          <input type="email" />
        </div>
        <button type="submit">送信</button>
      </form>
    </div>
  );
}

ブラウザでhttp://localhost:3000/contactを開いて確認してください。

Step 3: Blogページの作成

ブログのトップページを作成します:

export default function Blog() {
  const posts = [
    { id: 1, title: '最初のブログ記事' },
    { id: 2, title: 'Next.jsの使い方' },
    { id: 3, title: 'App Routerについて' }
  ];

  return (
    <div>
      <h1>Blog Page</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

ブラウザでhttp://localhost:3000/blogを開いて確認してください。

ネストしたページを作る

Next.js App Routerでは、フォルダを階層化してネストしたページを作れます。

ブログ記事の個別ページ

app/blog/first-post/page.tsxを作成します:

export default function FirstPost() {
  return (
    <div>
      <h1>最初のブログ記事</h1>
      <p>これは個別の記事ページです。</p>
      <p>URL: /blog/first-post</p>
    </div>
  );
}
```

フォルダ構造:

app/
└── blog/
    ├── page.tsx             → /blog
    └── first-post/
        └── page.tsx         → /blog/first-post

ブラウザでhttp://localhost:3000/blog/first-postを開いて確認してください。

ファイル名の特別ルール

Next.js App Routerには、特別な意味を持つファイル名があります。

page.tsx

ページとして表示されるファイルです。
“`
app/about/page.tsx → /about

layout.tsx

共通レイアウトを定義するファイルです。

typescript

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <div>
      <header>共通ヘッダー</header>
      {children}
      <footer>共通フッター</footer>
    </div>
  );
}

loading.tsx

ローディング中に表示される画面です。

typescript

export default function Loading() {
  return <p>読み込み中...</p>;
}

error.tsx

エラー発生時に表示される画面です。

'use client';

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  return (
    <div>
      <h2>エラーが発生しました</h2>
      <button onClick={() => reset()}>再試行</button>
    </div>
  );
}

not-found.tsx

404エラー時に表示される画面です。

export default function NotFound() {
  return (
    <div>
      <h2>ページが見つかりません</h2>
      <p>404 Not Found</p>
    </div>
  );
}
```

## よくある間違い

### ❌ 間違い1: ファイル名が違う
```
app/about/About.tsx → 表示されない
app/about/index.tsx → 表示されない
```

**正しい:**
```
app/about/page.tsx → /about で表示される
```

### ❌ 間違い2: フォルダがない
```
app/page.tsx → /about にはならない
```

**正しい:**
```
app/about/page.tsx → /about で表示される

❌ 間違い3: export defaultがない

function About() {
  return <div>About</div>;
}

正しい:

typescript

export default function About() {
  return <div>About</div>;
}
```

`export default`は必須です。

## 動的ルートの作り方

**Next.js App Router**では、動的なURLも簡単に作れます。

### [id]フォルダを使う
```
app/blog/[id]/page.tsx → /blog/1, /blog/2, /blog/abc など

コード例:

export default function BlogPost({ params }: { params: { id: string } }) {
  return (
    <div>
      <h1>記事ID: {params.id}</h1>
      <p>動的ルートのページです。</p>
    </div>
  );
}
```

`params.id`でURLのIDを取得できます。

### 実際の使い方
```
/blog/1 → params.id = "1"
/blog/hello → params.id = "hello"
/blog/react-tutorial → params.id = "react-tutorial"
```

## まとめ

**Next.js App Router**を使ったページ作成方法を解説しました。

**重要ポイント:**
- **Next.js App Router**はフォルダ構造でページを作る
- `page.tsx`というファイル名が必須
- フォルダ名がそのままURLになる
- `export default`を忘れずに
- ネストしたページも簡単に作れる

**フォルダ構造の例:**
```
app/
├── page.tsx          → /
├── about/
│   └── page.tsx      → /about
├── blog/
│   ├── page.tsx      → /blog
│   └── [id]/
│       └── page.tsx  → /blog/[id]
└── contact/
    └── page.tsx      → /contact

Next.js App Routerを使えば、ルーティング設定なしで簡単に複数ページのサイトが作れます!

次回は、作成したページ間を移動する方法(Linkコンポーネント)を解説します。

環境構築がまだの方は 【2025年版】Next.jsで始めるReact開発環境の構築方法 をご覧ください。

関連記事:

外部参考リンク:

ABOUT ME
Recommend
こちらの記事もどうぞ
記事URLをコピーしました