본문으로 건너뛰기
開発

Next.js 16 Preview:何が変わったのか? (feat. ゼロバンドル)

Vercelが公開したNext.js 16プレビューの核心機能分析。JavaScriptを送らない「ゼロバンドル」アーキテクチャと向上したサーバーアクション。

イ・ドンウク フロントエンドリード 14분 읽기
Next.js 16 Preview:何が変わったのか? (feat. ゼロバンドル)
Next.js 16 Preview:何が変わったのか? (feat. ゼロバンドル) / 出典: Unsplash

2025年12月、ついにNext.js 16のプレビューバージョンが公開された。Next.js 15が安定化(Stability)に集中したとすれば、今回の16バージョンは**性能の極限(Extreme Performance)**を追求する。

フロントエンドリードとして直接ベータバージョンをインストールしてみて、実務で体感できる核心変化3つを整理した。特に**ゼロバンドル(Zero Bundle)**という概念がどのように実装されたのか集中的に見てみる。

1. Zero Bundle:HTML is Back

Reactアプリを立ち上げるために数百キロバイトのJSファイルをダウンロードしていた時代は終わった。Next.js 16は可能な限りクライアントにJSを送らないという哲学を極端に押し進めた。

1.1 サーバー専用状態マシン

以前は useState を使うには無条件にクライアントコンポーネント(use client)に転換しなければならなかった。しかしNext.js 16では簡単なトグルやタブ転換のようなUIロジックをサーバーであらかじめ計算されたCSSとHTML属性に変換する。

// Next.js 16: JSなしで動作するタブコンポーネント(コンパイルタイム最適化)
export default function Tabs() {
  // クライアントJSバンドルに含まれない!
  // 純粋なHTMLチェックボックスハック(Checkbox Hack)やPopover APIに自動変換される
  return (
    <ServerToggle>
      <Tab title="A">Content A</Tab>
      <Tab title="B">Content B</Tab>
    </ServerToggle>
  );
}

結果的にブラウザがダウンロードするJavaScriptサイズは0KBになり得る。これはTTI(Time to Interactive)を画期的に短縮させる。

2. 向上したServer Actions:フォーム(Form)それ以上

Server Actionsが初めて出た時は単純にAPIルートを代替する用途だった。しかし16バージョンではリアルタイム双方向通信が可能になった。

2.1 ストリーミングアクション(Streaming Actions)

サーバーアクションが実行されている間、進行状況(Progress)をクライアントにストリーミングできる。

async function processData() {
  'use server';
  const stream = createStream();

  // 10% 進行.. 50% 進行..
  // 別途のWebsocketサーバーなしにHTTPストリーミングで転送
  await longRunningTask(stream);
}

これからはファイルアップロードやAI応答生成のような長い作業を処理する際、複雑なWebsocket設定なしにもプログレスバーを実装できる。

3. Turbopack Stable:今や本当に速い

Next.js 13からベータだったターボパック(Turbopack)がついに**正式(Stable)**バージョンになった。

  • Webpack対比700倍: 誇張ではない。大規模モノレポ環境でHMR(ホットリローディング)速度が目に見えて速くなった。
  • メモリ使用量: Rustで作成されたおかげでビルド時のメモリ占有率が半分以下に落ちた。CI/CDパイプライン費用節減にも大きな助けになる。

4. 部分的プリレンダリング(PPR)の完成

静的ページ(Static)と動的ページ(Dynamic)の区分が消えた。一つのページの中でヘッダーは静的に(ビルドタイム)、カートは動的に(ランタイム)レンダリングする**PPR(Partial Prerendering)**が基本値(Default)として活性化される。

開発者はもはや export const dynamic = 'force-dynamic' のようなオプションを悩む必要がない。フレームワークがコードを分析して勝手に最適なレンダリング戦略を選択する。

5. 結論:学ぶべきことが減った?

逆説的にNext.js 16は開発者が知るべきことを減らしてくれる方向に進化した。最適化、キャッシング、バンドリング設定をフレームワークが勝手にやってくれるからだ。

我々は今や next.config.js を修正する時間ではなく、ユーザーにどんな価値を与えるかを悩む時間により集中できるようになった。2026年のWeb開発はいつにも増して快適だろう。

共有

関連記事