Next.jsとは何か — 誕生の背景・Reactとの違い・なぜ今学ぶべきかを解説
この章の目次開く
Next.jsは、ReactをベースにしたフルスタックWebフレームワークです。ルーティング、サーバーサイドレンダリング（SSR）、静的サイト生成（SSG）、API処理など、Webアプリケーション開発に必要な機能が最初から組み込まれています。
学習者Reactを勉強したばかりなのに、もうNext.js？この2つって何が違うの？
ざっくり言うと、Reactは「UIを作るためのライブラリ」、Next.jsは「Reactを使って実際のWebアプリを作るために必要なもの（ルーティング、サーバー処理、ビルド、最適化）を全部揃えたフレームワーク」です。Reactだけだと自分で揃えなければならないピースを、Next.jsが最初から用意してくれます。
Next.jsが生まれた背景 — なぜReactだけでは足りなかったのか
Next.jsは2016年10月、Guillermo Rauch（ギジェルモ・ラウチ）によって公開されました。Guillermoは、リアルタイム通信ライブラリ Socket.IO の開発者としても知られるアルゼンチン出身のエンジニアで、当時は自身が創業した Zeit（現Vercel）のCEOでした。
当時のReact開発の課題
2016年当時、Reactは画面を描画するライブラリとしては非常に強力でしたが、「実際にWebアプリを作って公開する」ためには多くの追加設定が必要でした。
- ルーティングがない →
react-routerを自分で導入・設定する - **サーバーサイドレンダリング（SSR）**の仕組みがない → SEOや初回表示速度のために自前でNode.jsサーバーを構築する
- コード分割を自分で設定する必要がある → ページごとに適切にバンドルを分ける
- ビルド設定（Webpack）が複雑 →
create-react-appはあったが、SSR非対応
Guillermoの考え
Guillermoは当時のブログで、Next.jsのコンセプトを次のような方針で説明しています。
- ゼロ設定（Zero Config）：設定ファイルを書かなくても、賢いデフォルトで動く
- ファイルシステムベースのルーティング：ディレクトリにファイルを置くだけでページができる
- 自動的なサーバーレンダリング：SSRが特別な設定なしにデフォルトで有効
- 自動コード分割：各ページに必要なJavaScriptだけを配信する
「Reactで優れたWebアプリを作るための最短経路を提供する」——これがNext.jsの出発点でした。
ReactとNext.jsの違い
学習者Reactだけでもアプリは作れるよね？あえてNext.jsを使うメリットって何なの？
| 観点 | React単体 | Next.js |
|---|---|---|
| 種類 | UIライブラリ | フルスタックフレームワーク |
| ルーティング | 自分で追加（react-router等） | ファイルベースで自動 |
| レンダリング | クライアントサイドのみ（CSR） | SSR / SSG / ISR / CSR を選択可 |
| SEO | CSRは検索エンジンに弱い | SSR/SSGで最初からHTMLがある |
| サーバー処理 | なし（別途API構築が必要） | API Routes / Server Actions |
| 画像最適化 | 自分で実装 | next/image で自動最適化 |
| コード分割 | 手動設定 | ページ単位で自動 |
| 初期設定 | Webpack等の設定が必要 | npx create-next-app ですぐ開始 |
先生React公式ドキュメントでも「新しいプロジェクトを始めるならNext.jsなどのフレームワークを使おう」と推奨しているよ。Reactチーム自身が「Reactだけでは足りない」と認めている、ということなんだ。
いつReact単体を使うか
Next.jsが万能というわけではありません。以下のケースではReact単体（+ Viteなど）の方が向いていることもあります。
- Electron / React Nativeなど非Webプラットフォーム
- SPAで十分な社内ツール・管理画面（SEOが不要）
- 既存のバックエンドAPIがすでにあり、フロントだけ作りたい場合
Hello World
もっともシンプルなNext.jsのページを見てみましょう。
// app/page.tsx
export default function Home() {
return (
<main>
<h1>Hello, Next.js!</h1>
<p>はじめてのNext.jsアプリケーション</p>
</main>
);
}app/page.tsx というファイルを作るだけで、/ にアクセスしたときに表示されるページが完成します。ルーティング設定は不要です。これがNext.jsの「ファイルベースルーティング」の基本です。
App RouterとPages Router
Next.jsには2つのルーティング方式があります。
| 特徴 | App Router（推奨） | Pages Router（従来） |
|---|---|---|
| ディレクトリ | app/ | pages/ |
| デフォルト | Server Components | Client Components |
| レイアウト | ネストレイアウト対応 | _app.tsx で一括 |
| データ取得 | async コンポーネント内で直接 | getServerSideProps 等の専用関数 |
| 登場時期 | Next.js 13（2022年〜、13.4で安定版） | Next.js 1〜12 |
本書ではApp Routerを前提に解説を進めます。 2023年のNext.js 13.4でApp Routerが安定版になり、2024年以降の新規プロジェクトではApp Routerが推奨されています。
Next.jsの主な機能
本書で学ぶ範囲を中心に、Next.jsの主要機能を整理しておきます。
| 機能 | 内容 | 扱う章 |
|---|---|---|
| ファイルベースルーティング | ディレクトリ構成がそのままURLになる | 第4章 |
| Server Components | デフォルトでサーバー側レンダリング | 第3章 |
| ネストレイアウト | ヘッダーなどの共通UIを宣言的に管理 | 第5章 |
| 動的ルーティング | [id] でパラメータ付きURL | 第6章 |
| データ取得 + キャッシュ | fetch + revalidate でISR | 第7章 |
| Route Handlers | route.ts でAPIエンドポイントを作る | 第8章 |
| loading.tsx / error.tsx | ローディングとエラーの宣言的な処理 | 第9章 |
| メタデータ | SEO向けの <title> <meta> を型安全に管理 | 第10章 |
| Server Actions | "use server" でフォーム送信・データ更新 | 第11章 |
先生全部を一度に覚える必要はないよ。まずは「ファイルを置くとページができる」「Server Componentでデータが取れる」の2つだけ掴めれば、あとは実際に作りながら身につく。
Next.jsの現在 — なぜ2024年以降も学ぶべきか
Next.jsは2016年のリリース以来、Webフロントエンド開発の事実上の標準フレームワークの一つになっています。
- npm週間ダウンロード数はReactフレームワーク中トップクラス
- Hulu、TikTok、Nike、Notionなど大規模サービスでの採用実績
- React公式が「フレームワークを使おう」と推奨する中で、最も成熟した選択肢
- Server ComponentsやServer Actionsなど、React最新機能のいち早い実装
求人市場でもNext.jsのスキルは強く求められており、React開発者のキャリアパスとして自然な選択です。
次の章では、実際にNext.jsの開発環境を構築していきます。create-next-app で数分でプロジェクトが立ち上がる体験をしましょう。
