Next.js 15

claudejamodel: claude-sonnet-4-20250514

Next.js 15

投稿者: Delba de Oliveira @ delba_oliveira, Jimmy Lai @ feedthejim, Rich Haines @ studio_hungry

Next.js 15が正式に安定版となり、本番環境での使用準備が整いました。このリリースはRC1とRC2の両方のアップデートを基に構築されています。私たちは安定性に重点を置きながら、皆さんに気に入っていただけるであろういくつかのエキサイティングなアップデートを追加しました。

今すぐNext.js 15をお試しください：

# 新しい自動アップグレードCLIを使用
npx @next/codemod@canary upgrade latest

# ...または手動でアップグレード
npm install next@latest react@rc react-dom@rc

また、10月24日（木）のNext.js Confで次に予定されていることについてもお話しできることを楽しみにしています。

Next.js 15の新機能

@next/codemod CLI: 最新のNext.jsとReactバージョンへの簡単なアップグレード
Async Request APIs（破壊的変更）: 簡素化されたレンダリングとキャッシュモデルへの段階的なステップ
Caching Semantics（破壊的変更）: fetchリクエスト、GET Route Handler、クライアントナビゲーションがデフォルトでキャッシュされなくなりました
React 19サポート: React 19、React Compiler（実験的）、ハイドレーションエラー改善のサポート
Turbopack Dev（安定版）: パフォーマンスと安定性の改善
Static Indicator: 開発中に静的ルートを表示する新しいビジュアルインジケーター
unstable_after API（実験的）: レスポンスのストリーミング完了後にコードを実行
instrumentation.js API（安定版）: サーバーライフサイクル観測のための新しいAPI
Enhanced Forms（next/form）: クライアントサイドナビゲーションでHTMLフォームを強化
next.config: next.config.tsのTypeScriptサポート
Self-hosting Improvements: Cache-Controlヘッダーのより詳細な制御
Server Actions Security: 推測不可能なエンドポイントと未使用アクションの削除
Bundling External Packages（安定版）: AppとPages Routerの新しい設定オプション
ESLint 9 Support: ESLint 9のサポートを追加
Development and Build Performance: ビルド時間の改善とFaster Fast Refresh

@next/codemod CLIでスムーズなアップグレード

私たちは、破壊的変更のアップグレードを自動化するために、すべてのメジャーNext.jsリリースにcodemod（自動コード変換）を含めています。アップグレードをさらにスムーズにするため、強化されたcodemod CLIをリリースしました：

npx @next/codemod@canary upgrade latest

このツールは、コードベースを最新の安定版またはプレリリース版にアップグレードするのに役立ちます。CLIは依存関係を更新し、利用可能なcodemodを表示し、それらの適用をガイドします。

canaryタグはcodemodの最新バージョンを使用し、latestはNext.jsバージョンを指定します。最新のNext.jsバージョンにアップグレードする場合でも、フィードバックに基づいてツールの改善を継続的に追加する予定のため、codemodのcanaryバージョンの使用をお勧めします。

Next.js codemod CLIについて詳しく学ぶ。

Async Request APIs（破壊的変更）

従来のServer-Side Renderingでは、サーバーはコンテンツをレンダリングする前にリクエストを待機します。しかし、すべてのコンポーネントがリクエスト固有のデータに依存するわけではないため、それらをレンダリングするためにリクエストを待つ必要はありません。

理想的には、サーバーはリクエストが到着する前に可能な限り準備を行います。これを可能にし、将来の最適化の基盤を設定するために、いつリクエストを待つべきかを知る必要があります。

そのため、headers、cookies、params、searchParamsなどのリクエスト固有のデータに依存するAPIを非同期に移行しています。

import { cookies } from 'next/headers';

export async function AdminPanel() {
  const cookieStore = await cookies();
  const token = cookieStore.get('token');
  // ...
}

これは破壊的変更であり、以下のAPIに影響します：

cookies
headers
draftMode
layout.js、page.js、route.js、default.js、generateMetadata、generateViewportのparams
page.jsのsearchParams

移行を簡単にするため、これらのAPIは一時的に同期的にアクセスできますが、次のメジャーバージョンまで開発環境と本番環境で警告が表示されます。

移行を自動化するcodemodが利用可能です：

npx @next/codemod@canary next-async-request-api .

codemodがコードを完全に移行できない場合は、アップグレードガイドをお読みください。

新しいAPIへのNext.jsアプリケーションの移行方法の例も提供しています。

Caching Semantics

Next.js App Routerは独自のキャッシュデフォルトでローンチしました。これらは、必要に応じてオプトアウトする機能を持ちながら、デフォルトで最もパフォーマンスの高いオプションを提供するように設計されました。

フィードバックに基づいて、キャッシュヒューリスティックと、Partial Prerendering（PPR）やfetchを使用するサードパーティライブラリなどのプロジェクトとの相互作用を再評価しました。

Next.js 15では、GET Route HandlerとClient Router Cacheのキャッシュデフォルトを「デフォルトでキャッシュ」から「デフォルトでキャッシュしない」に変更しています。

以前の動作を保持したい場合は、引き続きキャッシュをオプトインできます。

今後数ヶ月でNext.jsのキャッシュを改善し続け、詳細をすぐに共有する予定です。

GET Route Handlerがデフォルトでキャッシュされなくなりました

Next 14では、GETHTTPメソッドを使用するRoute Handlerは、動的関数や動的設定オプションを使用しない限り、デフォルトでキャッシュされていました。

Next.js 15では、GET関数はデフォルトでキャッシュされません。

export dynamic = 'force-static'などの静的ルート設定オプションを使用してキャッシュをオプトインできます。

sitemap.ts、opengraph-image.tsx、icon.tsxなどの特別なRoute Handlerやその他のメタデータファイルは、動的関数や動的設定オプションを使用しない限り、デフォルトで静的のままです。

Client Router CacheがデフォルトでPageコンポーネントをキャッシュしなくなりました

Next.js 14.2.0では、Router Cacheのカスタム設定を可能にする実験的なstaleTimesフラグを導入しました。

Next.js 15では、このフラグは引き続きアクセス可能ですが、PageセグメントのstaleTimeを0にするようにデフォルト動作を変更しています。

これは、アプリ内をナビゲートする際に、クライアントが常にナビゲーションの一部としてアクティブになるPageコンポーネントからの最新データを反映することを意味します。

ただし、変更されない重要な動作がまだあります：

共有レイアウトデータは、部分レンダリングを継続してサポートするためにサーバーから再取得されません
戻る/進むナビゲーションは、ブラウザがスクロール位置を復元できるようにキャッシュから復元されます
loading.jsは5分間（またはstaleTimes.static設定の値）キャッシュされたままです

以下の設定を設定することで、以前のClient Router Cacheの動作をオプトインできます：

const nextConfig = {
  experimental: {
    staleTimes: {
      dynamic: 30,
    },
  },
};

export default nextConfig;

React 19

Next.js 15リリースの一環として、React 19の今後のリリースと歩調を合わせる決定を行いました。バージョン15では、App RouterはReact 19 RCを使用し、コミュニティのフィードバックに基づいてPages RouterでReact 18との後方互換性も導入しました。

Pages Routerを使用している場合、これにより準備ができたときにReact 19にアップグレードできます。

React 19はまだRC段階ですが、実際のアプリケーションでの広範囲なテストとReactチームとの密接な作業により、その安定性に確信を持っています。コアの破壊的変更は十分にテストされており、既存のApp Routerユーザーには影響しません。

そのため、プロジェクトがReact 19 GAに完全に準備されるよう、Next.js 15を今安定版としてリリースすることにしました。

移行を可能な限りスムーズにするため、移行プロセスを容易にするcodemodと自動化ツールを提供しています。

Next.js 15アップグレードガイド、React 19アップグレードガイドを読み、React Conf Keynoteを視聴して詳細を学んでください。

Pages Router on React 18

Next.js 15は、Pages RouterでReact 18との後方互換性を維持し、ユーザーがNext.js 15の改善を享受しながらReact 18を継続して使用できるようにします。

最初のRelease Candidate（RC1）以来、コミュニティのフィードバックに基づいてReact 18のサポートを含めることに焦点を移しました。

この柔軟性により、Pages RouterでReact 18を使用しながらNext.js 15を採用でき、アップグレードパスをより詳細に制御できます。

注意: 同じアプリケーションでPages RouterをReact 18で、App RouterをReact 19で実行することは可能ですが、この設定はお勧めしません。2つのバージョン間の基盤となるAPIとレンダリングロジックが完全に整合しない可能性があるため、予測不可能な動作と型の不整合が生じる可能性があります。

React Compiler（実験的）

React CompilerはMetaのReactチームによって作成された新しい実験的コンパイラです。コンパイラは、プレーンなJavaScriptセマンティクスとReactのルールの理解を通じて、コードを深いレベルで理解し、コードに自動最適化を追加できます。

コンパイラは、useMemoやuseCallbackなどのAPIを通じて開発者が行う必要がある手動メモ化の量を減らし、コードをよりシンプルで保守しやすく、エラーが起こりにくくします。

Next.js 15では、React Compilerのサポートを追加しました。

React Compilerと利用可能なNext.js設定オプションについて詳しく学ぶ。

注意: React Compilerは現在Babelプラグインとしてのみ利用可能で、開発とビルド時間が遅くなります。

ハイドレーションエラーの改善

Next.js 14.1では、エラーメッセージとハイドレーションエラーの改善を行いました。Next.js 15では、改善されたハイドレーションエラービューを追加してこれらを基に構築し続けています。

ハイドレーションエラーは、問題に対処する方法の提案とともにエラーのソースコードを表示するようになりました。

例えば、これはNext.js 14.1での以前のハイドレーションエラーメッセージでした：

Next.js 15ではこれを改善しました：

Turbopack Dev

next dev --turboが安定版となり、開発体験を高速化する準備が整ったことを発表できて嬉しく思います。私たちはvercel.com、nextjs.org、v0、その他すべてのアプリケーションでこれを使用して反復開発を行い、素晴らしい結果を得ています。

例えば、大規模なNext.jsアプリであるvercel.comでは、以下を確認しています：

ローカルサーバー起動が最大76.7%高速化
Fast Refreshでのコード更新が最大96.3%高速化
キャッシュなしでの初期ルートコンパイルが最大45.8%高速化（Turbopackにはまだディスクキャッシュがありません）

新しいブログ投稿でTurbopack Devについて詳しく学ぶことができます。

Static Route Indicator

Next.jsは、どのルートが静的または動的かを識別するのに役立つよう、開発中にStatic Route Indicatorを表示するようになりました。このビジュアルキューにより、ページがどのようにレンダリングされるかを理解することで、パフォーマンスを最適化しやすくなります。

next build出力を使用して、すべてのルートのレンダリング戦略を表示することもできます。

このアップデートは、Next.jsでの観測可能性を向上させる継続的な取り組みの一部であり、開発者がアプリケーションを監視、デバッグ、最適化しやすくします。

専用の開発者ツールにも取り組んでおり、詳細は近日公開予定です。

無効にできるStatic Route Indicatorについて詳しく学ぶ。

unstable_after（実験的）でレスポンス後のコード実行

ユーザーリクエストを処理する際、サーバーは通常、レスポンスの計算に直接関連するタスクを実行します。しかし、ログ記録、分析、その他の外部システム同期などのタスクを実行する必要がある場合があります。

これらのタスクはレスポンスに直接関連していないため、ユーザーはそれらの完了を待つ必要がありません。ユーザーへのレスポンス後に作業を延期することは、サーバーレス関数がレスポンスが閉じられた直後に計算を停止するため、課題となります。

after()は、レスポンスのストリーミングが完了した後に処理される作業をスケジュールできる新しい実験的APIで、プライマリレスポンスをブロックすることなくセカンダリタスクを実行できます。

使用するには、next.config.jsにexperimental.afterを追加します：

const nextConfig = {
  experimental: {
    after: true,
  },
};

export default nextConfig;

その後、Server Components、Server Actions、Route Handlers、またはMiddlewareで関数をインポートします。

import { unstable_after as after } from 'next/server';
import { log } from '@/app/utils';

export default function Layout({ children }) {
  // セカンダリタスク
  after(() => {
    log();
  });

  // プライマリタスク
  return <>{children}</>;
}

Summary

Summary

Key Points

Translations

Next.js 15

Next.js 15の新機能

@next/codemod CLIでスムーズなアップグレード

Async Request APIs（破壊的変更）

Caching Semantics

GET Route Handlerがデフォルトでキャッシュされなくなりました

Client Router CacheがデフォルトでPageコンポーネントをキャッシュしなくなりました

React 19

Pages Router on React 18

React Compiler（実験的）

ハイドレーションエラーの改善

Turbopack Dev

Static Route Indicator

unstable_after（実験的）でレスポンス後のコード実行