Next.jsとは？App Routerとレンダリングの全体像

Next.js は、React を使った Web アプリケーションを構築するためのフレームワークです。React 自体は「画面を組み立てるためのライブラリ」であり、URL の設計、サーバーでの HTML 生成、ビルド、画像やフォントの最適化といった部分は含まれていません。Next.js はそこを丸ごと引き受け、React だけでは自分で寄せ集める必要があった要素を一つの枠組みにまとめたものです。

本記事はシリーズの入口として、Next.js が何を解決しているのか、どのバージョンで何が変わったのか、そして学習をどの順で進めるとよいのかを整理します。個々の実装手順は各回にまとめてあります。

1React だけでは足りない部分を埋める

React 単体でアプリを作る場合、次のような判断を自分で行うことになります。

• ルーティングライブラリを選び、URL とコンポーネントの対応を自分で定義する
• ビルドツール（バンドラ）を設定し、開発サーバーと本番ビルドを整える
• 検索エンジンや初回表示を考えるなら、サーバー側で HTML を生成する仕組みを別途用意する
• 画像の最適化、フォントの読み込み、コード分割などをそれぞれ導入する

Next.js はこれらに既定の答えを持っています。ルーティングはフォルダ構成そのもの、ビルドは同梱のバンドラ、サーバーでの実行は最初から前提、画像とフォントは専用コンポーネントで最適化される、という具合です。「決めなくてよいことが増える」のがフレームワークを使う最大の利点で、その代わりにフレームワークの流儀を覚える必要があるのがコストになります。

2App Router と Pages Router

Next.js には歴史的な経緯から 2 つのルーティング方式があります。学習を始めるときに最も混乱しやすいのがここで、検索で出てくる記事がどちらの方式で書かれているかによって、フォルダ名も API もまったく変わります。

Pages Router は現在も動作しますが、新規に学ぶなら App Router を選ぶのが素直です。ネット上の記事に getServerSideProps や pages/index.js が出てきたら、それは Pages Router 時代の情報だと判断できます。本シリーズはすべて App Router を前提としています。

3サーバーで動くか、ブラウザで動くか

App Router で最初に越えるべきハードルが、コンポーネントが既定ではサーバー側で実行されるという点です。ファイルの先頭に 'use client' と書いたものだけがブラウザにも配られ、そこではじめて useState やクリックイベント、window などのブラウザ API が使えます。

この境界は制約ではなく設計の道具です。データベースへの問い合わせや API キーを使う処理はサーバー側に置いたままにでき、ブラウザに送る JavaScript を減らせます。逆に、境界を意識せずに書くと「useState が使えない」「window is not defined が出る」といったエラーに繰り返しぶつかることになります。詳しくは サーバーコンポーネントとクライアントコンポーネント で扱います。

4バージョン 16 で変わったこと

Next.js は変化の速いフレームワークで、日本語の解説記事はバージョン 13〜14 のものが多く残っています。2026 年 8 月時点の安定版は 16.3 で、次のような違いがあります。

• Turbopack が既定のバンドラになり、--turbopack を付ける必要がなくなった
• キャッシュの考え方が Cache Components（use cache ディレクティブ）に整理され、fetch は既定でキャッシュされない
• params や searchParams、cookies() などが 非同期でのみアクセスできるようになった
• middleware という名前が proxy に変わった
• Node.js は 20.9 以上が必須になった

古い記事どおりに書いたコードが動かない場合、原因の多くはこの世代差です。移行時の詰まりどころは バージョン16 への移行と注意点 にまとめています。

5向いている用途・慎重に考えたい用途

6このシリーズの読み進め方

各記事は単体でも読めますが、前後の ◀ ▶ ボタンで順番に進める構成になっています。まったくの初学者であれば、次の順で読むと詰まりにくくなります。

すでに React や Vue.js の経験があるなら、1 と 2 を流し読みして 4 の「サーバーとクライアントの境界」から入っても構いません。逆に JavaScript 自体がまだ不慣れな場合は、先に React 側の基礎を押さえたほうが遠回りになりません。