第2章: Next.jsの歴史 — Pages RouterからApp Routerへの10年

10年の進化を俯瞰する

Next.jsは2016年のv1から2025年のv16まで、約10年間で16のメジャーバージョンをリリースしてきました。 この章では、各バージョンの主要な変更を追いながら、Next.jsがどのように進化し、 なぜPages RouterからApp Routerへの大転換が必要だったのかを解き明かします。

timeline
    title Next.js メジャーバージョン年表
    section 黎明期
      2016 : v1.0 SSR + ファイルルーティング
      2017 : v2-4 静的エクスポート, React 16
    section 成長期
      2018 : v5-7 Universal Webpack, サーバーレス
      2019 : v8-9 TypeScript, API Routes, ISR
    section 成熟期
      2020 : v10 next/image, 国際化
      2021 : v11-12 Rustコンパイラ, Middleware
    section 大転換期
      2022-23 : v13-14 App Router, RSC, Server Actions
    section 新時代
      2024-25 : v15-16 Cache Components, Turbopack

黎明期（2016-2017）— SSRフレームワークとしての出発

v1.0（2016年10月25日）— すべてはここから

Next.js 1.0は、3つのシンプルな機能を提供するフレームワークでした。

当時のReactでSSRを実現するには、webpack設定、サーバー構築、ルーティング設定など大量のボイラープレートが必要でした。 Next.jsはnextコマンド一つでこれらすべてを自動化した点が革命的でした。

v2〜v4（2017年）— 基盤の強化

v2ではスケーラビリティが改善され、HMR（Hot Module Replacement）が強化されました。 v3では静的エクスポート（next export）が追加され、SSRだけでなく純粋な静的サイトも生成可能に。 起動時間は5倍に高速化されました。 v4ではReact 16に対応し、SSRが2.6倍高速化されています。

成長期（2018-2019）— エコシステムの拡大

v5〜v8 — Webpack統一からサーバーレスへ

v5（2018年2月）ではUniversal Webpackが導入され、サーバーとクライアントで統一的なWebpack設定が実現しました。 v6で_app.jsによるカスタムApp コンポーネントが追加され、 v8（2019年2月）では各ページをLambda関数として出力するサーバーレスデプロイが可能になりました。

v9（2019年7月）— ターニングポイント①

v9はNext.jsの最初の大きなターニングポイントです。以下の4つの重要機能が一挙に追加されました。

v9.3（2020年3月）ではgetStaticPropsとgetServerSidePropsが導入され、 ページ単位でSSGとSSRを明示的に選択できるようになりました。 そしてv9.5（2020年7月）で、Next.jsの代名詞となるISR（Incremental Static Regeneration）が登場します。

// pages/posts/[id].js — ISRの例（v9.5〜）
export async function getStaticProps({ params }) {
  const post = await fetchPost(params.id);
  return {
    props: { post },
    revalidate: 60, // 60秒ごとにバックグラウンドで再生成
  };
}

ISRにより、ビルド時に全ページを生成する必要がなくなり、 2時間かかっていたビルドが1分に短縮されるケースも出現しました。

成熟期（2020-2021）— DXとパフォーマンスの追求

v10（2020年10月）— 画像最適化の革命

next/imageコンポーネントの導入により、画像の自動最適化が実現しました。 WebP変換、レスポンシブサイズ、遅延読み込みがゼロコンフィグで提供されます。 国際化ルーティングとNext.js Analyticsも追加されました。

v12（2021年10月）— ターニングポイント②：Rustコンパイラ

v12は、Next.jsのビルドインフラにRustが本格投入された最初のバージョンです。 SWCベースのRustコンパイラがBabelを置き換え、コンパイル速度が劇的に向上しました。 また、Middleware（ベータ）が導入され、リクエストレベルでの処理が可能になりました。

大転換期（2022-2024）— App Routerの衝撃

v13（2022年10月）— ターニングポイント③：App Router

Next.js 13は、フレームワークの歴史において最も大きな転換点です。 App Router（ベータ）の導入により、Pages Routerとはまったく異なるアーキテクチャが提示されました。

Layouts RFC（2022年5月）で提案されたこの新アーキテクチャは、 SvelteKitのlayout.js規約、MetaのRelayベースルーター、React Router、Ember.jsなどから着想を得ています。 v13.4（2023年5月）でApp Routerが安定版となり、Server Actions（アルファ）も追加されました。

v14〜v15 — 安定化と方向転換

v14（2023年10月）でServer Actionsが安定版に昇格し、Partial Prerendering（プレビュー）が発表されました。 v15（2024年10月）ではキャッシュのデフォルト動作が大きく変更されました。

新時代（2025）— v16の全貌

v16（2025年10月21日）— Cache Components時代の幕開け

Next.js 16は、App Router導入以来最大のアップデートです。主要な変更は以下の通りです。

特にCache Componentsは、v15でのキャッシュデフォルト変更の「答え」とも言える機能です。 デフォルトではすべて動的に実行し、開発者が"use cache"で明示的にキャッシュをオプトインする。 暗黙的な魔法ではなく、宣言的で予測可能なキャッシュモデルへの転換です。

破壊的変更の系譜 — なぜ破壊するのか

Next.jsは約10年間で多くの破壊的変更を行ってきました。 その背景には「Webプラットフォームの進化に追随し、最適なDXを維持する」という哲学があります。

graph TB
    A[v9: getInitialProps → getStaticProps/getServerSideProps] --> B[v12: Babel → SWCコンパイラ]
    B --> C[v13: pages/ → app/ ディレクトリ]
    C --> D[v15: キャッシュデフォルト変更]
    D --> E[v16: middleware.ts → proxy.ts]
    D --> F[v16: 暗黙キャッシュ → use cache 明示的オプトイン]
    D --> G[v16: Webpack → Turbopack デフォルト]
    style A fill:#3b82f6,stroke:#1d4ed8,color:#fff
    style C fill:#f97316,stroke:#ea580c,color:#fff
    style F fill:#10b981,stroke:#059669,color:#fff

注目すべきは、各破壊的変更が前の世代の課題に対する回答になっている点です。 getInitialPropsの柔軟すぎる設計 → getStaticProps/getServerSidePropsの明示的分離。 ページ単位の制約 → コンポーネント単位のApp Router。 暗黙的キャッシュの混乱 → "use cache"の明示的オプトイン。 それぞれが先代の反省を踏まえた進化なのです。

まとめ

Next.jsの10年間は、Web開発のパラダイムシフトそのものでした。 SSRフレームワークとして出発し、ISRで静的と動的の融合を実現し、 App RouterでReact Server Componentsを世界に届け、 Cache Componentsで予測可能なキャッシュモデルを確立しました。

次章では、App Routerのアーキテクチャを深掘りし、 ファイルシステムベースルーティング、Dynamic Routes、Parallel Routes、 そしてレイアウトシステムの仕組みを詳細に解説します。