MameTechNews
← 記事一覧に戻る
フロントエンド

Next.js 16.3のInstant Navigations、v0でエージェント検証の事例公開

## POINTS

  • 動的アプリでもSuspenseや'use cache'でシェルを先読みし、即時遷移を狙える仕組みがある
  • Playwrightのinstant()ヘルパーで、遷移がinstantかどうかを決定的に検証できる
  • v0ではエージェントがテスト駆動で遅い遷移を修正し、16件のCIテストを残した

概要

Next.jsチームは、Next.js 16.3のInstant NavigationsをVercelのコーディングプラットフォームv0へ適用した事例を公開した。動的でパーソナライズされたアプリでも、クライアントへ大量のロジックを移さずに遷移を高速化できるアプローチが示されている。

仕組みの要点

  • 動的UIはSuspenseのloading、または'use cache'で事前取得可能な部分を切り出せる
  • ブラウズ中に部分的なUIをブラウザ側へキャッシュし、遷移時に即表示する
  • Playwright向けinstant()ヘルパーで、ネットワーク待ちなしに見えるUIをテストできる

エージェントによる改善ループ

v0ではコーディングエージェントが、遅い遷移ごとに失敗するテストを書き、Skillのパターンで修正し、再テストするループを回した。最終的にホームページやチャット詳細、設定配下など複数ルートがinstantになり、16件の回帰防止テストが追加されたという。既存アプリ向けにはnext-cache-components-optimizer Skillが案内されている。