Next.js、勉強しようとして挫折したことありませんか？
僕はあります。チュートリアルやってみても「これ結局どこで何が動いてるの？」が分からなくて、途中でやめちゃいました。
この記事を読み終わる頃には、以下の表が「なるほどね」と思えるようになります。
結論：構成パターン一覧
| 構成 | できること | 必要なサーバー |
|---|---|---|
| React単体 | 1ページ、API通信OK | 静的ファイル配信のみ |
| React + React Router | + ページ遷移 | 静的ファイル配信のみ |
| React + React Router + APIサーバー | + DB処理、認証、重い処理 | 静的ファイル配信 + API |
| Next.js | ページ遷移、API、SSR/SSG、DB接続OK | Next.jsサーバー |
| Next.js + APIサーバー | + 特化処理（ML、他言語の得意分野） | Next.js + 特化API |
「？」となった方、大丈夫です。順番に説明します。
前提知識：CSR / SSR / SSG って何？
まずこれを押さえないと始まりません。
CSR（Client-Side Rendering）
ブラウザが空っぽのHTMLを受け取って、JavaScriptで画面を組み立てる方式。
1. ブラウザ「ページください」
2. サーバー「はい、空のHTMLとJSファイルね」
3. ブラウザ「JS実行して...画面できた！」
React単体だとこれしかできません。
問題点：
- 初期表示が遅い（JS読み込み待ち）
- SEOに弱い（検索エンジンのクローラーが空HTMLを見る）
SSR（Server-Side Rendering）
リクエストが来るたびに、サーバーでHTMLを生成して返す方式。
1. ブラウザ「/users/123 ください」
2. サーバー「DBからユーザー情報取得して...HTMLできた、はいどうぞ」
3. ブラウザ「もう画面できてる！」
ユーザーごとに内容が変わるページに向いてます。
SSG（Static Site Generation）
ビルド時に全ページのHTMLを事前生成しておく方式。
ビルド時：全記事のHTMLを生成しておく
↓
リクエスト時：生成済みHTMLをそのまま返す（超速い）
ブログやドキュメントなど、内容があまり変わらないものに向いてます。
構成パターンを順番に理解する
「何が足りなくて次の構成に進むのか」を意識すると分かりやすいです。
1. React単体
┌─────────────┐ ┌─────────────────┐
│ ブラウザ │ ←──→ │ 静的ファイル置き場 │
│ (React) │ │ (S3, Vercel等) │
└─────────────┘ └─────────────────┘
できること：
- 1ページのアプリ、ゲーム、ツール
- APIを叩いてデータ取得もできる
できないこと：
- ページ遷移（URLで画面を切り替える）
1画面で完結するものなら、これで十分です。
2. React + React Router
「ページ分けたいな」と思ったら、React Routerを足します。
┌─────────────┐ ┌─────────────────┐
│ ブラウザ │ ←──→ │ 静的ファイル置き場 │
│ (React + │ │ (S3, Vercel等) │
│ React Router)│ └─────────────────┘
└─────────────┘
ポイント：サーバーは増えてない。
React Routerは「ブラウザ内で」URLに応じてコンポーネントを切り替えます。
1. 最初に全ページ分のJSを読み込む
2. /about に移動 → サーバーに聞かず、ブラウザ内で About コンポーネントを表示
3. /users に移動 → 同様にブラウザ内で切り替え
URLが変わっても、サーバーへのリクエストは発生しません。
できること：
- ページ遷移
- 複数ページのSPA（Single Page Application）
できないこと：
- DB接続や重い処理（フロントだけでは無理）
- SSR/SSG（まだCSRだけ）
3. React + React Router + APIサーバー
「ユーザー情報をDBから取りたい」「ログイン機能つけたい」となったら、APIサーバーを足します。
┌─────────────┐ ┌─────────────────┐
│ ブラウザ │ ←──→ │ 静的ファイル置き場 │
│ (React) │ └─────────────────┘
└─────────────┘
│
│ APIリクエスト
▼
┌─────────────┐ ┌─────────────┐
│ APIサーバー │ ←──→ │ DB │
│ (FastAPI等) │ └─────────────┘
└─────────────┘
役割分担：
- React Router → URLに応じて画面を切り替える
- APIサーバー → DB接続、認証、重い処理、データを返す
ページの「器」は静的ファイル、「中身のデータ」はAPIで取得。これがSPAの基本形です。
できること：
- 管理画面、ダッシュボード、本格的なWebアプリ
できないこと：
- SSR/SSG（まだCSRだけ）
SEOを気にしないサービス（管理画面、ログイン必須のサービス等）なら、この構成で十分です。
4. Next.js
「SEO大事」「初期表示を速くしたい」「OGPちゃんと出したい」となったら、Next.jsの出番です。
┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│ ブラウザ │ ←──→ │ Next.js │ ←──→ │ DB │
│ (React) │ │ サーバー │ └─────────────┘
└─────────────┘ └─────────────┘
ここがポイント：Next.jsはサーバーとして動いている。
React単体やReact Routerの構成では「静的ファイル置き場」があれば良かったですが、Next.jsは自身がNode.jsサーバーとして起動します。
Next.jsの3つの役割：
- ページルーティング — ファイルを置くだけでURLが決まる
- CSR/SSR/SSGの管理 — ページごとに選べる
- API Routes — バックエンドのエンドポイントも書ける
app/
page.tsx → GET / で画面
about/
page.tsx → GET /about で画面
api/
users/
route.ts → GET/POST /api/users でJSON
ReactとNext.jsの関係
Next.jsは「Reactを内包している」と言えます。
- フロントの部分 → React（ブラウザで動く）
- サーバーの部分 → Next.js（SSR/SSG、API Routes）
Next.jsを使う＝Reactを使う、です。VueやSvelteに差し替えることはできません。Vueを使いたいならNuxt、SvelteならSvelteKitという別のフレームワークを選びます。
| フロント | フルスタックフレームワーク |
|---|---|
| React | Next.js |
| Vue | Nuxt |
| Svelte | SvelteKit |
5. Next.js + APIサーバー
「機械学習の処理入れたい」「Pythonじゃないとできない処理がある」となったら、特化したAPIサーバーを足します。
┌─────────────┐ ┌─────────────┐
│ ブラウザ │ ←──→ │ Next.js │
│ (React) │ │ サーバー │
└─────────────┘ └─────────────┘
│
┌─────────────┼─────────────┐
▼ ▼ ▼
┌────────┐ ┌────────┐ ┌────────┐
│ DB │ │ FastAPI│ │ Axum │
└────────┘ │ (ML) │ │ (高速) │
└────────┘ └────────┘
Next.jsが「統括」の立ち位置になって、得意分野ごとに処理を振り分けます。
Next.jsで挫折した理由
振り返ると、僕がNext.jsで挫折した理由は「どこにいて何をするのか」が分からなかったからでした。
- Next.jsがサーバーとして動いてることを知らなかった
- React Routerとの違いが分からなかった
- API Routesの立ち位置が分からなかった
- SSR/SSGが何を解決するのか分からなかった
これらを理解せずにチュートリアルをやっても、そりゃ挫折しますよね。
選び方の目安
最後に、何を作るかで構成を選ぶ目安です。
| 作りたいもの | おすすめ構成 |
|---|---|
| 1画面のツール・ゲーム | React単体 |
| 複数ページのSPA（SEO不要） | React + React Router |
| 管理画面・ダッシュボード | React + React Router + API |
| ブログ・LP・SEO重要なサイト | Next.js |
| 本格的なWebサービス | Next.js + 特化API |
まとめ
| 構成 | できること | 必要なサーバー |
|---|---|---|
| React単体 | 1ページ、API通信OK | 静的ファイル配信のみ |
| React + React Router | + ページ遷移 | 静的ファイル配信のみ |
| React + React Router + APIサーバー | + DB処理、認証、重い処理 | 静的ファイル配信 + API |
| Next.js | ページ遷移、API、SSR/SSG、DB接続OK | Next.jsサーバー |
| Next.js + APIサーバー | + 特化処理（ML、他言語の得意分野） | Next.js + 特化API |
この表、最初に見たときより「分かる」ようになってたら嬉しいです！