Next.js 16.3 Preview の Instant Navigations を触ってみた
2026年7月15日
Instant Navigationsとは
Next.js 16.3 Preview においてInstant Navigations なるものが追加されたとのことなので、一体どういうものなのか確かめてみた。結論から言うと、新規機能というよりは、新たに 「キャッシュが効くモードになっているけどその正しい利用ができてないよ」と警告を出してくれる、というものだった。
Next.js 16 で cacheComponents: true を設定すると、"use cache" ディレクティブが使えるようになり、コンポーネントやデータ取得の結果をキャッシュできるようになる。これにより、ページ遷移時にキャッシュ済みの部分を即座に表示し、残りをストリーミングで流す、という体験が可能になる。
ただ、キャッシュが有効になるのは実際に"use cache" や <Suspense> を記述してあるときだけであり、これが漏れていると恩恵を受けられない。
今回の警告は、 「cacheComponents: true なのに、このページには "use cache" や <Suspense>も使われていない async 処理がある。このままだとナビゲーション時にブロックするよ」と伝えてくれる、という機能である。
試してみる
async function getRandomNumber(): Promise<number> {
// "use cache" なし → キャッシュされない
await new Promise((resolve) => setTimeout(resolve, 2000));
return Math.floor(Math.random() * 100);
}
// Suspense で囲まれていない async コンポーネント getRandomNumberが
// トップレベルで await → ナビゲーションをブロック
export default async function DemoPage() {
const number = await getRandomNumber();
return (
<div className="p-8">
<h1 className="text-2xl font-bold">Instant Navigations Demo</h1>
<p className="mt-4 text-lg">Random number: {number}</p>
</div>
);
}cacheComponents: true を設定した上で、"use cache" や <Suspense> を利用していないページ /demo を作成してみる
dev モードでページを開き、別ページ⇨ /demo に遷移すると、Next.js encountered uncached data during prerendering というエラーを確認することができた。
参考文献
https://azukiazusa.dev/blog/nextjs-instant-navigations/