先日 Next.js 16 が利用できるようになりました。
さらっと内容を理解するためのキャッチアップようにまとめました。
キャッチアップできてなかった！って方のための記事です。
use cache ディレクティブ導入
use cache を利用することでページ、コンポーネント、関数をキャッシュ個別にキャッシュできるようになりました。
機能を有効にするには next.config.ts にオプションを追加する必要があります。
import type { NextConfig } from 'next'
const nextConfig: NextConfig = {
cacheComponents: true,
}
export default nextConfig
ユーザー固有のコンテンツをキャッシュする場合は use cache: private を利用すると良いとのことです。
use cache: private は試験的な機能だとのことなので本番環境での使用はお控えください。
Next.js DevTools MCP
ハイドレーションエラーやアップデートに必要なライブラリの検知などを行ってくれます。
様々なことを自動で最適化していってくれるため開発体験が大幅に向上します。
Turbopack がデフォルトに
安定版として利用可能になり、デフォルトの設定になりました。
Fast Refresh が 5 〜 10 倍高速化されるということで開発体験が上がりそうですね！
dev や build コマンドに webpack オプションをつけることで引き続き webpack でも利用できます。
next dev --webpack
next build --webpack
ルーティングの最適化
レイアウトの重複排除って何かと思いましたが、ネットワークの転送量が削減されるとのことです。
共有レイアウトを使用する複数のURLを事前に読み込む場合、各Linkごとに個別にレイアウトをダウンロードするのではなく、1回のリクエストでまとめて取得します。例えば、50個の商品リンクを含むページでは、従来のように50回レイアウトをダウンロードする必要がなくなり、ネットワーク転送量が大幅に削減されます。
ページ全体ではなく、キャッシュに存在しない部分のみをプリフェッチされます。
- リンクがビューポートから外れた場合はリクエストをキャンセル
- リンクにマウスオーバーした時やビューポートに再表示された時は、リンクのプリフェッチを優先
- データが無効になったリンクについては、再度プリフェッチを実行
- 今後実装予定の「Cache Components」などの新機能ともシームレスに連携
プリフェッチの仕組みが変わるため、プリフェッチリクエストは増加、ネットワークの転送量が減ります。
記事にはトレードオフであると書かれていましたので今後のパフォーマンスに関しては少し気にしておく必要がありそうだと思いました。
キャッシュ API の改良
revalidateTag() が更新
cacheLifeプロファイルが必須になり、
キャッシュの更新タイミングを明確に制御できるようになりました。
import { revalidateTag } from 'next/cache';
// ✅ Use built-in cacheLife profile (we recommend 'max' for most cases)
revalidateTag('blog-posts', 'max');
// Or use other built-in profiles
revalidateTag('news-feed', 'hours');
revalidateTag('analytics', 'days');
// Or use an inline object with a custom revalidation time
revalidateTag('products', { expire: 3600 });
updateTag() が追加
updateTag()は、同じリクエスト内で期限切れのデータをすぐに読み取る、書き込み読み取りセマンティクスを提供する新しいサーバー アクション専用 API です。
'use server';
import { updateTag } from 'next/cache';
export async function updateUserProfile(userId: string, profile: Profile) {
await db.users.update(userId, profile);
// Expire cache and refresh immediately - user sees their changes right away
updateTag(`user-${userId}`);
}
これにより、インタラクティブな機能に変更が即座に反映されます。
フォーム、ユーザー設定、そしてユーザーが更新内容を即座に確認したいワークフローなどに最適です。
refresh() の追加
キャッシュされていないデータのみを更新するための、新しいサーバーアクション専用 API です。
'use server';
import { refresh } from 'next/cache';
export async function markNotificationAsRead(notificationId: string) {
await db.notifications.markAsRead(notificationId);
refresh();
}
ページ上の他の場所に表示されているキャッシュされていないデータを更新する必要がある場合に使用します。
破壊的変更
以下アップデート時に修正対応が必要そうな項目です。
- Node.js 20.9 必須（v18 サポート終了）
- TypeScript 5.1 必須
- AMP、next lint、レガシー設定の削除
- params と searchParams が非同期に（必須変更）
- すべての並行ルートスロットに default.js ファイルが必須
個人的には過去一世を風靡したと言ってもいい AMP のサポート終了が少し寂しい気持ちになりました。
まとめ
全体としてパフォーマンス関連が大きくアップデートされた印象です。
キャッシュの方法これまでは暗黙的に行われていたことで一部ブラックボックスのように感じられたのがコントロールできるのは良かった気がしています。
ただ、言い換えるならキャッシュ戦略を行わないとパフォーマンスが悪くなっていくことは明白です。
よりパフォーマンスは中止しておく必要がありそうです。
また、16.1 についても発表がありました。
v16 ではベータ版だった 「Turbopack のファイルシステムキャッシュ」の実装によりコンパイル時間の短縮が実現されました。
また、実験的な要素だと書かれていましたが「バンドルアナライザー」が追加されバンドルサイズの最適化が簡単にできるようになりました。
他にも依存関係の修正や MCP へのツール追加なども行われているのでぜひチェックしてみてください！