Next.js バージョンヒストリー 徹底解説 - v1 から v16 まで、Pages Router から Cache Components までの進化

Next.js は 2016年10月25日 に v1.0 がリリースされて以来、約10年間で React 周辺の「事実上の標準フルスタックフレームワーク」へと成長してきました。本記事では v1 から最新の v16 までの主要バージョンを、追加された機能・アーキテクチャ変更・破壊的変更を軸に時系列で整理します。

本記事は 2026年5月14日時点 の情報をもとに、公式ブログ・公式サポートポリシー・GitHub Releases を参照しつつ整理しています。最新の最小要件等は必ず公式ドキュメントを併せて確認してください。

Next.js とは

Next.js は Vercel（旧 ZEIT）が開発する React ベースのフルスタックフレームワークです。当初は SSR（サーバーサイドレンダリング）を簡単に実現するためのライブラリとして始まり、現在は次のような領域までカバーしています。

• ファイルベースルーティング（Pages Router / App Router）
• SSR / SSG / ISR / Streaming SSR / Partial Prerendering
• React Server Components / Server Actions
• ビルトインの next/image next/font next/script
• Turbopack によるバンドリング
• Middleware / Proxy（リクエスト境界の制御）
• Cache Components（明示的キャッシュ）

公式サイト: https://nextjs.org/

バージョン年表（早見表）

公式の Active LTS は最新メジャー、Maintenance LTS は1つ前のメジャー。EOL となったメジャーは原則セキュリティ修正も提供されないため、本番運用では LTS の2系統だけが選択肢になります。

v1〜v8 - 黎明期（2016〜2019）

v1.0（2016-10）- すべての始まり

最初の Next.js は驚くほどシンプルでした。

• pages/ ディレクトリにファイルを置けば、それがそのままルートになる（Pages Router の原型）
• getInitialProps で SSR データ取得
• Hot Module Replacement（HMR）標準搭載
• Webpack / Babel 設定済み（zero-config）
• 画像・CSS の取り込みは個別設定が必要、ルーティングも単純

「React で SSR するのが面倒すぎる」という当時の課題に対する明快な解として登場し、Vercel（当時 ZEIT）の Now（現 Vercel）と組み合わせてデプロイまで一気通貫で扱えたのが革新的でした。

v2 - v4（2017）- 安定化と React 16 対応

このあたりで Next.js は「SSR 専用」から「SSR / SSG 両対応」のハイブリッド SSR フレームワークへと進化を始めます。

v5 - v8（2018〜2019）- ビルド基盤の整備

• v5.0（2018-02）: Universal Webpack（クライアント／サーバー両方を Webpack で扱う）、CSS-in-JS 改善、Sass 対応
• v6.0（2018-04）: Babel 7 対応、extends app and document で _app.js _document.js の概念が確立
• v7.0（2018-09）: 起動・コンパイル速度の大幅改善、エラーオーバーレイ刷新、Webpack 4
• v8.0（2019-02）: Serverless Mode 導入、各ページを独立した Lambda にデプロイ可能に

v8 の Serverless Mode は「Vercel 以外でも Next.js を任意の FaaS にデプロイできる」基盤として、後の Edge Runtime につながる重要な布石でした。

v9（2019-07）- 自動最適化期の幕開け

ここから Next.js は「規約に従えば、最適化は勝手に行う」方向にハッキリ舵を切ります。

主な追加:

• TypeScript ビルトインサポート（tsconfig.json を置くだけで認識）
• API Routes（pages/api/* で REST API を同居実装）
• Automatic Static Optimization（データ取得しないページは自動で静的 HTML 化）
• Dynamic Routes（pages/posts/[id].tsx 形式の動的ルート）
• Built-in Zero-Config Deployment

getServerSideProps / getStaticProps / getStaticPaths の3点セットも v9 系で揃い、データ取得 API の整理がここで一段落しました。

v10（2020-10）- next/image と国際化

「Web の総バイト数の50%は画像」という現実に正面から取り組み、組み込みの画像最適化 API を提供したのが v10 です。

• next/image コンポーネント（自動的にレスポンシブ画像生成、遅延読み込み、WebP 変換）
• 国際化ルーティング（i18n Routing）（サブパス・サブドメインベース）
• Next.js Analytics（Real Experience Score、Core Web Vitals 計測）
• React 17 サポート
• Fast Refresh の改善、CSS の取り込みを node_modules 配下のコンポーネントからも可能に

next/image はその後 v13 で大幅刷新され、現在の姿に近づきます。

v11（2021-06）- SWC の萌芽

Babel と Terser を Rust 製ツールチェイン（SWC）に少しずつ置き換え始めたのがこの世代。

• SWC 初期統合（実測でビルドが約2倍高速化）
• ES Modules サポート（実験的）
• HTTP keep-alive によるデータフェッチの高速化
• ソースマップ生成が約70%高速化
• next/script で外部スクリプトを優先度付きで読み込む API
• next/image の改善（プレースホルダ blur など）

「JavaScript で書かれたツールを Rust で書き直す」という、後の Turbopack に直結する流れが本格的に始まりました。

v12（2021-10）- Rust Compiler と Middleware

v12 は v9 以来の大型アップデート。

• Rust Compiler (SWC) 完全搭載: Fast Refresh 約3倍、ビルド約5倍、minify は Terser 比7倍高速
• Middleware (beta): リクエスト前に任意のコードを実行（リダイレクト、書き換え、ヘッダ追加、HTML ストリーミング）
• React 18 サポート（当時 RC）
• AVIF 画像フォーマット対応（WebP より約20%軽量）
• ネイティブ ES Modules サポート、URL imports（alpha）
• React Server Components（alpha）

12.2 では Middleware が stable、Edge API Routes（実験）、On-Demand ISR が stable（再デプロイなしで個別 URL を再生成、Vercel 上で約300ms で全世界伝播）が追加され、Edge Runtime と動的再生成のセットが現実的な選択肢になりました。

v13（2022-10）- App Router の登場

Next.js の歴史で最大の転換点。app/ ディレクトリを使った App Router（beta） が登場し、ルーティング・レイアウト・データ取得・キャッシュの全レイヤーが見直されました。

主な追加（v13.0 時点）:

• App Router（beta）
  • ネストされた Layout（layout.tsx）
  • React Server Components（async コンポーネント、デフォルト サーバー実行）
  • Streaming + Suspense
  • ルートレベルの loading.tsx / error.tsx / not-found.tsx
• next/image の刷新（lazy 読み込み、要件緩和）
• @next/font（Google Fonts のセルフホスト化、レイアウトシフト排除）
• next/link の刷新（<a> タグを内包する形に）
• Turbopack（alpha）: Webpack 後継として開発開始

ただし、v13.0 時点では App Router はまだ beta で、本番投入はまだ早い段階でした。

v13.4（2023-05）- App Router が Stable に

App Router が 正式安定版に昇格し、Pages Router から App Router への移行が本格化します。

• React Server Components（stable）
• Nested Routes & Layouts（stable）
• Simplified Data Fetching（fetch ベースのデータ取得 + Next.js 拡張のキャッシュ／再検証）
• Built-in SEO Support（generateMetadata / metadata エクスポート）
• Server Actions (alpha)（"use server" ディレクティブでサーバー関数を直接呼び出す）

App Router は「ルートごとに静的／動的／ストリーミングを混在できる」設計で、後の Partial Prerendering（PPR） と Cache Components につながる土台になりました。

v14（2023-10）- Server Actions Stable と Turbopack 飛躍

v14 はパフォーマンスと安定性に重きを置いたリリース。

• Server Actions（stable）: フォーム mutation を progressively enhanced に書ける、API Routes を手書きする必要がない
• Turbopack（dev で大幅進歩）:
  • 5,000 件以上のテストが通過
  • ローカルサーバー起動が約 53% 高速化
  • Fast Refresh によるコード更新が約 94% 高速化
• Partial Prerendering（preview）: 静的シェルにストリーミングで動的部分を差し込む
• Metadata の改善（OGP・Twitter Card 関連）
• Node.js の最低要件が 18.17 に
• next export コマンド廃止 → output: 'export' 設定に統一

Server Actions の安定化により、「フォーム送信のために API ルートを書く」必要がほぼなくなり、シンプルな CRUD は驚くほど短く書けるようになりました。

import { revalidatePath } from 'next/cache';
import { db } from '@/lib/db';
 
async function addTodo(formData: FormData) {
  'use server';
  await db.todo.create({ data: { title: formData.get('title') as string } });
  revalidatePath('/todos');
}
 
export default function TodosPage() {
  return (
    <form action={addTodo}>
      <input name="title" />
      <button type="submit">追加</button>
    </form>
  );
}

v15（2024-10）- 非同期 API と React 19 への布石

v15 は 破壊的変更を含む整理のリリース。React 19 のリリースに向けた前準備という色合いが濃い。

主な追加・変更:

• Async Request APIs（Breaking）: cookies() / headers() / params / searchParams が Promise を返す形に変更
  • 以前: const cookieStore = cookies()
  • 以後: const cookieStore = await cookies()
• Caching Semantics（Breaking）: fetch リクエストと GET Route Handlers が デフォルトでキャッシュされなくなった
  • 必要な箇所で明示的に cache: 'force-cache' を付ける運用へ
• React 19 サポート（App Router）と React Compiler（実験）
• Turbopack Dev（stable）: 1.0 として正式安定
• next/form: <form> 要素にクライアントサイド遷移を組み込む新コンポーネント
• Server Actions のセキュリティ強化: 推測不能なエンドポイント自動生成、未使用 Action の排除
• next.config.ts: 設定ファイルを TypeScript で書ける
• instrumentation.js API（stable）: サーバーライフサイクルの観測ポイント
• @next/codemod CLI: 自動アップグレード（npx @next/codemod@canary upgrade latest）

「キャッシュは便利だけど暗黙すぎて事故が起きる」という長年の声に応え、デフォルトを「キャッシュしない」側に倒したのが v15 のもっとも大きな思想転換です。

export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  return <h1>{slug}</h1>;
}

v16（2025-10）- Turbopack Stable と Cache Components

最新メジャー v16 は Next.js Conf 2025 に合わせてリリース。Turbopack が完全な stable になり、開発体験が一段階上がりました。

主な追加（v16.0）:

• Turbopack（stable・デフォルト）
  • すべてのアプリで デフォルトのバンドラに
  • Fast Refresh 最大 5〜10倍、ビルド最大 2〜5倍 高速化
  • Webpack ベースは引き続き利用可能だが、新規プロジェクトは Turbopack 標準
• Turbopack File System Caching（beta）: 大規模アプリでさらに起動・コンパイルを高速化
• Cache Components: "use cache" ディレクティブで関数・コンポーネント・ページを明示的にキャッシュ
  • PPR の正式な後継、next.config.ts で cacheComponents: true 有効化
  • これまでの暗黙キャッシュは廃止、すべて明示的に opt-in
• React Compiler サポート（stable）: 自動メモ化が組み込みで動作
• Build Adapters API（alpha）: ビルドプロセスをカスタマイズする公式拡張ポイント
• Enhanced Routing: レイアウト重複排除と段階的プリフェッチで遷移をさらに最適化
• Improved Caching APIs: updateTag() の追加、revalidateTag() のリファイン
• proxy.ts（旧 middleware.ts）: ネットワーク境界を明示的にし、Node.js ランタイム上で動作
  • 既存の middleware.ts は Edge Runtime 用としてしばらく残るが deprecated
• Next.js DevTools MCP: Model Context Protocol 経由で AI エージェントに Next.js 固有のコンテキスト（ルーティング・キャッシュ・アクティブルート・ログ）を渡せる
• React 19.2 サポート: View Transitions、useEffectEvent()、<Activity> 等

破壊的変更（v16）:

• async params 完全必須化（v15 で導入された変更が完全適用）
• next/image のデフォルト値見直し
• experimental.ppr フラグ削除（→ cacheComponents に統合）
• Node.js 最低要件 20.9+
• 対応ブラウザ: Chrome 111+ / Edge 111+ / Firefox 111+ / Safari 16.4+
• TypeScript 5+

'use cache';
export async function getPopularPosts(limit: number) {
  const res = await fetch(`https://api.example.com/posts?limit=${limit}`);
  return res.json();
}

import type { NextRequest } from 'next/server';
import { NextResponse } from 'next/server';
 
export default function proxy(request: NextRequest) {
  if (request.nextUrl.pathname.startsWith('/old-blog')) {
    return NextResponse.redirect(new URL('/blog', request.url));
  }
}

v16.2（2026-03）- Turbopack の磨き込み

2026年3月18日にリリースされた v16.2 は、機能追加よりも Turbopack の品質向上に振り切ったマイナーリリース。

• next dev 起動が約400%高速化（Time-to-URL）
• Server Components ペイロードのデシリアライズ最適化で約50% 高速レンダリング
• サーバーリフレッシュ時間が約375%高速化
• Turbopack に200件以上の修正と改善
  • Server Fast Refresh
  • Subresource Integrity サポート
  • 動的 import のツリーシェイキング
• Cache Components の安定化
• React 19.2 系の機能追従

「Turbopack は速いが、まだ細かい挙動で詰まる」という声に対する回答が v16.2 と言えます。

公式サポートポリシー（2026年5月時点）

公式の Next.js Support Policy では、以下の2系統だけが本番運用として推奨されます。

具体的な期限:

• v16: Active LTS 〜 2027-10-21
• v15: Maintenance LTS 〜 2026-10-21

つまり、v14 以前を本番で動かしているプロジェクトは、まず v15 への移行を急ぐべき段階。

アップグレード戦略

メジャーをまたぐ移行は、Next.js では @next/codemod CLI が公式に用意されています。

# v16 系最新へ自動アップグレード
npx @next/codemod@canary upgrade latest

npm install next@latest react@latest react-dom@latest

主要バージョンごとの「ハマりどころ」サマリ:

経験的には、1 メジャーずつ刻んで上げるのがもっとも安全です。v13 → v16 のように飛び級すると、async API 化やキャッシュ仕様の変化が一度に押し寄せてデバッグが厳しくなります。

進化の流れを一行で振り返る

• v1〜v8: SSR / SSG が手軽に書ける時代
• v9〜v11: 規約による自動最適化（TypeScript / next/image / SWC）
• v12〜v13: Rust 化と App Router、Server Components の世界へ
• v14〜v15: Server Actions の安定化と「明示的キャッシュ」への思想転換
• v16: Turbopack stable + Cache Components による「速くて、明示的で、AI エージェントに優しい」フレームワークへ

「React のフレームワーク」というより、いまや React アプリのインフラ層を引き受ける OS に近い存在になっています。

まとめ

Next.js のバージョン履歴を一気通貫で見ると、次の3つの軸で進化していることが分かります。

1. ツールチェインの Rust 化: Babel/Terser → SWC → Turbopack
2. データ取得・キャッシュの整理: getInitialProps → getServerSideProps/getStaticProps → fetch ベース App Router → 明示的 Cache Components
3. アーキテクチャの抽象化: Pages Router → App Router → Partial Prerendering → Cache Components

新規プロジェクトはまず v16 + App Router + Cache Components から始めるのが無難。既存プロジェクトは公式 LTS に乗っているか（v15 か v16 か）をまず確認し、EOL の v14 以前を引きずっているならアップグレードを優先タスクに据えるのがおすすめです。

参考リンク

• Next.js Blog
• Next.js 16 リリースノート
• Next.js 16.2 リリースノート
• Upgrading: Version 16
• Next.js Support Policy
• Next.js Latest Version - Release History, LTS & EOL
• vercel/next.js GitHub Releases