目次
Claude Code や ChatGPT に「Web アプリ作りたい」と相談すると、ほぼ確実に「Next.js を使いましょう」と返ってくる。経験者には自然な提案だが、初心者にとっては「Next.js って何？ React と違うの？ 本当に必要？」という疑問が立て続けに湧くはずだ。
結論から書く: 初心者の最初の1〜2プロジェクトでは、Next.js は「必要」ではなく「便利」。「動くものを作る」が目標なら、もっと軽い選択肢（静的 HTML、Astro、Vite + React）で足りるケースが多い。一方で、React の公式ドキュメントは新しいアプリをフレームワークから始めるよう勧めており、その筆頭に Next.js を挙げている。本記事はこの両面を、React と Next.js の公式ドキュメント（2026年10月1日時点）の原文で確かめながら、「使う・使わない」の分かれ目を整理する。
この記事の担当は「AI に Next.js を勧められたときの判断」だ。Next.js の仕組み（レンダリング方式・App Router・版ごとの変化）は Next.jsとは？、公開先の Vercel を使うかどうかは AIに「Vercel使いましょう」と言われたら に分けてある。
AI が勧めても、最初の1本に必要とは限らない
— やりたいことの規模で判断する、3つの落としどころ
AI は よく見かける「Next.js + Vercel + Tailwind」の組み合わせを最初に出すことが多い。
規模に対する判断を一度自分で挟むだけで、覚えることの量が変わる。
1. AIはなぜNext.jsを勧めるのか——3つの理由
AI ツールが Next.js を提案するのには、ちゃんとした根拠がある。3つに整理する。
AIがNext.jsを勧める3つの理由
理由①: 公式ドキュメントが勧めているから
React の公式ドキュメント「Creating a React App」は、新しいアプリやサイトを React で作るなら、フレームワークから始めることを勧めると書き、最初に Next.js（App Router）を挙げている。公開されたコードや解説記事にも Next.js の例が多い。AI にとって Next.js を勧めることは「外れにくい回答」になる。ただしこれは「あなたの用途に最適か」を見た判断ではない。
理由②: 必要な機能が「全部入り」
素の React（Vite + React など）だけでは、ルーティング・サーバー側での描画・画像最適化・APIを別々のライブラリで組み合わせる必要がある。Next.js はこれを 1つのフレームワークで提供する。AI が「説明するものが減る」「コードが少ない」と判断するのは合理的だ。
理由③: 公開までの手順が短い
Next.js を開発・保守しているのは Vercel で、React 公式もそう明記している。Vercel は GitHub 連携で push するたびに公開まで進むので、「コードを書く → 公開する」までの摩擦が少ない。ただし Vercel の無料プランは非商用に限られるなど条件がある。詳しくは AIに「Vercel使いましょう」と言われたら を参照。
2. Next.jsとは何か——判断に要る分だけ
用語を整理する。混乱しやすいのは次の3つだ。
- JavaScript: Web ブラウザで動く基本のプログラミング言語
- React: Meta（旧 Facebook）が作った UI ライブラリ、コンポーネントで画面を組み立てる道具
- Next.js: Vercel が開発する React の上に乗る「フレームワーク」、ルーティング・サーバー側の描画・最適化など「Web アプリを作るたびに必要になる仕組み」をまとめたもの
家を建てる比喩で言うと: JavaScript = 木材、React = ハンマーやノコギリ、Next.js = 骨組み（土台・柱・屋根の枠）まで組まれた家のキット。内装と家具を整えれば住めるが、キットの決まりに合わせる必要がある。
2026年10月1日時点の最新は Next.js 16.3（2026年8月3日公開）。判断で押さえるべきは版番号より 「更新の頻度」だ。Next.js は2026年7月からセキュリティ修正を月ごとに予告して出す方式に移り、2026年9月には 16.3 系を「Active LTS」、15.5 系を「Maintenance LTS」として修正版を出している（Next.js 公式ブログ）。使うなら、この更新を追い続ける前提になる。仕組みの詳しい説明（SSR・SSG・ISR、App Router、版ごとの変化）は Next.jsとは？ にまとめた。
3. 今すぐNext.jsが必要？判断の分かれ目
「あなたに Next.js が必要か」を5問で絞り込む。そのあとに、公式ドキュメントが書いている向き・不向きと、分かれ目の表を置く。
Next.js 要否を決める5問
Q1〜Q3 で「Next.js 向き」が2つ以上なら Next.js が向いている。
ほとんど当てはまらないなら、もっと軽い選択肢を検討する余地がある。
公式ドキュメントが示す向き・不向き（2026年10月1日時点）
Next.js の公式ドキュメントに「向かないケース」の一覧は無い。代わりに、React 公式の「どう始めるか」と、Next.js 公式の「どこに置けば何が動くか」が、判断の材料になる。
| 出典 | 原文に書いてあること | 判断への意味 |
|---|---|---|
| React「Creating a React App」 | 新しいアプリはフレームワークから始めることを推奨、挙げているのは Next.js（App Router）、React Router（v7）、Expo（ネイティブアプリ用） | Web アプリなら Next.js は公式が勧める候補の1つ、唯一の選択肢ではない |
| 同上「Start From Scratch」 | 既存のフレームワークに合わない制約がある、自分でフレームワークを作りたい、React の基本を学びたい場合は、ゼロから始める選択肢がある（ルーティングやデータ取得は自分で選ぶ） | 学習目的なら Vite などで素の React から始めるのは公式にも沿う |
| Next.js「Deploying」 | Node.js サーバーと Docker は全機能、静的エクスポートは一部、各社の独自統合は「機能と互換性が異なる場合がある」 | 置き場所で使える機能が変わる、Vercel でなくても全機能は動く |
| Next.js「Static Exports」 | 静的エクスポートでは、Cookie、リライト・リダイレクト・ヘッダーの設定、ISR（一定時間ごとの再生成）、リクエストに依存する Route Handlers などが使えない | 静的ファイルしか置けないレンタルサーバーに載せたいなら、これらを使わない設計にするか、別の選択肢へ |
| Next.js 公式ブログ | 2026年7月から月ごとのセキュリティリリースを予告して出す方式、2026年9月時点で 16.3 系が Active LTS、15.5 系が Maintenance LTS | サーバーで動かすなら、更新を当て続ける運用が前提になる |
分かれ目の表——Next.js を選ぶ・選ばない
上の原文と5問を合わせると、判断の分かれ目は次のようにまとまる（公式の記述と、この記事での整理を分けて読むこと）。
| 条件 | Next.js を選ぶ側 | 選ばない側（代わりの候補） |
|---|---|---|
| 作るもの | 公開ページとログイン後の画面・API が混ざる Web アプリ | 記事を並べるだけのサイト（Astro・Hugo・WordPress） |
| 検索流入 | 多くのページを検索に出したい | ログイン後の画面だけ（Vite + React の SPA） |
| 学習の段階 | React の基本（コンポーネント・props・state）はわかる | React 自体が初めて（公式も素の React から学ぶ道を示している） |
| 置き場所 | Node.js か Docker が動く、または Vercel など対応する PaaS | 静的ファイルしか置けない、サーバー機能が要るなら別の構成 |
| 運用 | 月ごとのセキュリティ更新を当てられる | 更新を追う余力が無い（静的サイトなら影響を受けにくい） |
| 既存の資産 | 新規プロジェクト | Laravel・Rails・Django などが既に動いている |
4. Next.jsなしで始める方法——主要な代替4選
「Next.js じゃなくてもいい」と分かったら、用途別に 4つの代替が現実的だ。
| 選択肢 | こんな人に | 強み | 弱み |
|---|---|---|---|
| Astro | ブログ・ポートフォリオ・LP | ページを HTML として出力し、動きが要る部分だけ JavaScript を足せる、React・Vue・Svelte の部品も混ぜられる | ログイン中心の動的アプリには向かない |
| Vite + React | SPA・社内ツール・ToDo アプリ | 設定が少なくすぐ動く、React の基本だけに集中できる | 検索に出したいページはサーバー側の仕組みを別に用意する必要がある |
| SvelteKit | サーバー側の描画も欲しいが React でなくてよい | HTML に近い書き方、サーバー側の描画を内蔵 | React で覚えたことがそのまま使えない |
| HTML + Vanilla JS | 本当に小さなサイト | 依存ゼロ、静的ファイルを置くだけで公開できる | 規模が大きくなると管理が破綻しやすい |
具体的な選び方の指針:
- 個人ブログ・記事サイト → Astro、AI Arte 自体は Laravel ベースだが、新規に静的なブログを始めるならまず試す価値がある
- ToDo アプリ・計算機・社内 SPA → Vite + React、React の基本を覚えるのにも向く
- 「React を使いたくない」 → SvelteKit、テンプレートの書き方が HTML に近い
- ランディング1ページだけ → HTML + CSS、フレームワーク不要
5. 使うなら最低限知っておくこと——5つの基礎
「Next.js でいく」と決めたら、これだけは押さえる5つの基礎。
基礎①: App Router vs Pages Router
Next.js には新方式（App Router）と旧方式（Pages Router）が共存している。新規プロジェクトは App Router で始める（公式ドキュメントも App Router が中心）。古いチュートリアルは Pages Router 前提のものが多いので、「これ App Router 用？」と確かめる習慣をつけること。
基礎②: Server Components と Client Components
App Router の中心になる考え方。コンポーネントは既定で Server Component（サーバー側で描画される）。クリックなどの操作が必要な部分は、ファイルの先頭に 'use client' を書いて Client Component にする。「データ取得は Server、画面の操作は Client」と覚えておくと、最初の混乱の多くを避けられる。
基礎③: ファイル名がルーティング
app/about/page.tsx → /about、app/blog/[slug]/page.tsx → /blog/任意の文字列。フォルダ構造がそのまま URL という設計。React Router などとは考え方が違うので、最初は戸惑う。
基礎④: 環境変数の置き場
API キーなどは .env.local に書く。ブラウザに渡してよいものだけ NEXT_PUBLIC_ を付ける。サーバーだけで使うものには付けない。これを間違えて秘密の値がブラウザに出るのが初心者によくある事故だ。
基礎⑤: Vercel 以外のデプロイ先
Next.js 公式の「Deploying」によると、Node.js サーバー（next start）と Docker は全機能が動く。静的エクスポートは一部の機能だけ。Cloudflare や Netlify などは各社の独自統合で、公式は「機能と互換性が異なる場合がある」としている（Cloudflare と Netlify は公式の検証済みアダプタを開発中）。自前のサーバーでも全機能は動くが、そのぶん更新や監視を自分で引き受ける。Vercel を使う場合の条件は AIに「Vercel使いましょう」と言われたら に書いた。
6. 初心者がハマりやすい落とし穴——3つ
落とし穴①: 「全部 use client にする」
エラーが出るたびに 'use client' を足していくと、サーバーで描画する利点がほとんど消える。それなら Vite + React の方が素直だ。「Client は最小限、Server を基本」を意識する。
落とし穴②: 置き場所の条件を後から知る
AI に言われるまま Vercel の無料プランで始め、あとから「広告を貼ったら商用なので無料プランでは使えない」と知る、というのが典型だ。Vercel の Hobby は非商用の個人利用に限られ、Pro は月$20から、超過分は従量課金になる（2026年10月1日時点の Vercel 公式）。逆に、静的ファイルしか置けないレンタルサーバーに載せようとして、リダイレクトや ISR が使えないと後で気づくこともある。作り始める前に置き場所を決め、そこで動く機能だけで設計する。
落とし穴③: AI が古い Pages Router 構文で書いてくる
古いコードが学習データに大量にあるため、AI が Pages Router 風の getStaticProps や pages/ ディレクトリを使ったコードを返してくることがある。「App Router で書いて」と明示するだけで精度が上がる。プロンプトのコツ も参照。
package.json の next の値をそのまま貼り、「App Router・TypeScript で」と前提を1行添えるだけで、出てくるコードの食い違いが減る。Next.js 16.3 では、コーディングエージェントがプロジェクトの版に合ったドキュメントを設定なしで読める仕組みも入った（Next.js 16.3）。
まとめ
本記事のポイントを整理する。
- AI が Next.js を勧める理由: 公式が勧めている / 全部入り / 公開までが短い——どれも正当だが「あなたに最適」とは別の話
- React 公式は新規アプリをフレームワークから始めるよう勧める一方、React の基本を学ぶならゼロから始める道も示している
- 判断は 「何を作る」「検索流入」「ログイン・DB」「React の基本」「置き場所」の5問と、分かれ目の表で決める
- Next.js は Node.js サーバーと Docker なら全機能、静的エクスポートは一部だけ、Vercel は必須ではない
- 使うなら 月ごとのセキュリティ更新を当て続ける運用が前提（2026年7月から）
- 3大落とし穴: 全部 use client 化 / 置き場所の条件を後から知る / AI が古い Pages Router で書く
AI に「Next.js を使おう」と言われたとき、「分かりました」と即採用する前に、本当に必要か一度立ち止まるのがプロの第一歩だ。Next.js は強力なツールだが、最初の1本に必要とは限らない。
FAQ
はい。Next.js は React の上に乗るため、コンポーネント・props・state といった React の基本概念は必須。「React 公式の学習ページ → 簡単な SPA を Vite で作る → そこから Next.js」の順序なら、何が React の話で何が Next.js の話かを混同しにくい。
名前が似ているが別物。React Native は スマホアプリ（iOS/Android）を作るための仕組み、Next.js は Web アプリ用のフレームワーク。スマホアプリを作りたいなら、React 公式がネイティブアプリ向けに挙げている Expo を見るとよい。
できるが、各社に条件がある。Cloudflare Pages の無料枠はビルドが月500回まで（公式の制限）、Netlify の Free は月300クレジットで上限に達すると止まる（2025年9月以降の新規）。静的エクスポートなら静的ファイルを置ける場所ならどこでも公開できる。各社の無料枠の条件は PaaS（Vercel等）とは にまとめた。
既定は Server、画面の操作だけ Clientが基本。useState / useEffect / onClick などを使う部分は 'use client' が必要。データ取得（fetch・DB アクセス）は Server で。迷ったら一度 Server で書き、エラーが出た部分だけ Client に切り出すと整理しやすい。
同じシリーズです。AIが「定番」として勧めるツール（Docker / Next.js / TypeScript など）は、よく使われているから勧めているのであって、あなたに最適とは限らない。初心者は「AI 推奨 = 自分にも必要」と思い込みがちだが、規模・目的・学習の段階で一度判断を挟むのが本記事の主旨。
