1. ホーム
2. web
3. Next.js 15正式リリース後の変更点と実運用ベストプラクティス

はじめに

Next.js 15 は React 19 サポート、再設計されたキャッシュモデル、非同期リクエスト処理 API の刷新を特徴とする安定版リリースです。fetch リクエストと GET Route Handler のデフォルトが キャッシュなし に変更され、挙動の予測可能性が大幅に向上しました。本記事ではプロダクション移行に必要な変更点を網羅します。

React 19 安定版との統合

Next.js 15 は React 19 安定版 と組み合わせることで、React Compiler による自動メモ化を利用できます。これにより、多くのケースで手動の useMemo、useCallback、React.memo が不要になります。

React Compiler を有効化するには：

// next.config.ts
const nextConfig = {
  experimental: {
    reactCompiler: true,
  },
};
export default nextConfig;

use() によるレンダリング中の Promise 直接読み取りや、"use server" ディレクティブによる Server Actions も完全サポートされています。

キャッシュデフォルトの変更

Next.js 14 では fetch リクエストがデフォルトでキャッシュされていましたが、15 では デフォルトでキャッシュされません。明示的にオプトインする必要があります：

// Next.js 15 — 指定がない限りキャッシュされない
const data = await fetch('https://api.example.com/data');

// キャッシュを有効化
const cached = await fetch('https://api.example.com/data', {
  cache: 'force-cache',
});

GET Route Handler もデフォルトで dynamic になります。静的にするには：

// app/api/data/route.ts
export const dynamic = 'force-static';

これにより動的アプリケーションでの予期しないキャッシュ動作が減少し、プログレッシブエンハンスメント の原則に沿った動作となります。

Async Request API: cookies()、headers()、params()

Next.js 15 ではリクエストタイム API に async アクセスが必須となりました：

// app/dashboard/page.tsx
import { cookies } from 'next/headers';

export default async function Page() {
  const cookieStore = await cookies();
  const token = cookieStore.get('session');
}

動的ルートの params も非同期化：

// app/blog/[slug]/page.tsx
export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  return <div>Post: {slug}</div>;
}

これによりストリーミングや Suspense との統合が改善されます。

Turbopack の改善

Rust ベースのバンドラ Turbopack が 開発環境で安定版 になりました。主な改善点：

• webpack 比 70% 高速なコールドスタート
• 永続キャッシュによる 即時 Fast Refresh
• プラグイン不要の CSS / SVG 処理

明示的に有効化：

// next.config.ts
const nextConfig = {
  turbopack: true,
};

その他の変更点

Next.js 14 からの移行手順

1. パッケージ更新: npm install next@15 react@19 react-dom@19
2. params の非同期化: すべての params 使用箇所を await params に変更
3. cookies()/headers() の更新: 各呼び出しに await を追加
4. キャッシュの見直し: 必要な箇所に cache: 'force-cache' を追加
5. Turbopack の有効化: next.config.ts で turbopack: true
6. React Compiler の試験的導入: reactCompiler: true を試行

まとめ

Next.js 15 は React 19 の安定サポート、予測可能なキャッシュデフォルト、そしてクリーンな非同期 API により、フレームワークの透明性とパフォーマンスを大きく向上させました。デフォルトキャッシュの廃止により明示的なオプトインが必要になりますが、結果としてより予測可能で保守しやすいアプリケーション構築が可能になります。非同期 API への移行は計画的に行いましょう。