コンテンツへスキップ
ブログに戻る

2024年10月21日（月）

Next.js 15

投稿者
デルバ・デ・オリベイラ
Delba de Oliveira@delba_oliveira
ジミー・ライ
Jimmy Lai@feedthejim
リッチ・ヘインズ
Rich Haines@studio_hungry

Next.js 15は正式に安定版となり、本番環境での利用準備が整いました。このリリースは、RC1とRC2の両方のアップデートを基に構築されています。安定性に重点的に取り組みながら、皆様に気に入っていただけるようなエキサイティングなアップデートを追加しました。ぜひ今日からNext.js 15をお試しください。

ターミナル
# Use the new automated upgrade CLI
npx @next/codemod@canary upgrade latest
 
# ...or upgrade manually
npm install next@latest react@rc react-dom@rc

また、今週木曜日10月24日に開催されるNext.js Confで、今後の予定について詳しくご紹介できることを楽しみにしています。

Next.js 15の新機能

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

破壊的変更のアップグレードを自動化するのに役立つコードモッド（自動化されたコード変換）を、すべてのメジャーリリースのNext.jsに含めています。

アップグレードをさらにスムーズにするために、強化されたcodemod CLIをリリースしました。

ターミナル
npx @next/codemod@canary upgrade latest

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

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

Next.js codemod CLIの詳細については、こちらをご覧ください。

非同期リクエストAPI（破壊的変更）

従来のサーバーサイドレンダリングでは、サーバーはコンテンツをレンダリングする前にリクエストを待ちます。しかし、すべてコンポーネントがリクエスト固有のデータに依存するわけではないため、リクエストを待ってレンダリングする必要はありません。理想的には、サーバーはリクエストが到着する前にできるだけ多くの準備を行います。これを有効にし、将来の最適化の準備をするには、リクエストをいつ待つ必要があるかを知る必要があります。

そのため、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は一時的に同期的にアクセスできますが、次のメジャーバージョンまで、開発と本番環境で警告が表示されます。コードモッドを使用して移行を自動化できます。

ターミナル
npx @next/codemod@canary next-async-request-api .

コードモッドでコードを完全に移行できない場合は、アップグレードガイドをお読みください。また、Next.jsアプリケーションを新しいAPIに移行する方法の例も提供しています。

キャッシングセマンティクス

Next.js App Routerは、意見のあるキャッシングデフォルトで起動しました。これらは、必要に応じてオプトアウトできる機能を備えた、デフォルトで最もパフォーマンスの高いオプションを提供するように設計されました。

皆様からのフィードバックに基づいて、キャッシングヒューリスティックとその方法を再評価しました。部分的プリレンダリング（PPR）や、fetchを使用するサードパーティライブラリとのやり取り。

Next.js 15では、fetchリクエスト、GETルートハンドラー、クライアントルーターキャッシュのキャッシングデフォルトを、デフォルトでキャッシュされているものからデフォルトでキャッシュされていないものに変更します。以前の動作を維持したい場合は、引き続きキャッシングをオプトインできます。

今後数か月間、Next.jsのキャッシングを改善し続け、近日中に詳細情報を共有します。

fetchリクエストはデフォルトでキャッシュされなくなりました

Next.jsは、Web fetch APIキャッシュオプションを使用して、サーバー側のfetchリクエストがフレームワークの永続的なHTTPキャッシュとどのようにやり取りするかを構成します。

fetch('https://...', { cache: 'force-cache' | 'no-store' });
  • no-store - すべてのリクエストでリモートサーバーからリソースを取得し、キャッシュを更新しません。
  • force-cache - リソースをキャッシュから取得する（存在する場合）、またはリモートサーバーから取得してキャッシュを更新します。

Next.js 14では、動的な関数または動的な設定オプションが使用されていない限り、cacheオプションが指定されていない場合、デフォルトでforce-cacheが使用されていました。

Next.js 15では、cacheオプションが指定されていない場合、デフォルトでno-storeが使用されます。これは、**fetchリクエストがデフォルトではキャッシュされない**ことを意味します。

それでも、次のようにしてfetchリクエストのキャッシングを有効にすることができます。

GETルートハンドラーは、デフォルトではキャッシュされなくなりました

Next.js 14では、動的な関数または動的な設定オプションを使用しない限り、GET HTTPメソッドを使用したルートハンドラーはデフォルトでキャッシュされていました。Next.js 15では、GET関数は**デフォルトでキャッシュされません**。

静的なルート設定オプション（例：export dynamic = 'force-static'）を使用して、キャッシュを有効にすることができます。

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

クライアントルーターキャッシュは、デフォルトではPageコンポーネントをキャッシュしなくなりました

Next.js 14.2.0では、staleTimesフラグを導入して、ルーターキャッシュのカスタム設定を可能にしました（実験的機能）。

Next.js 15でもこのフラグは使用できますが、PageセグメントのstaleTimeを0にするデフォルトの動作に変更されています。つまり、アプリ内を移動すると、クライアントは常に、ナビゲーションの一部としてアクティブになるPageコンポーネントからの最新データを反映します。ただし、重要な動作は変更されていません。

  • 部分レンダリングを継続的にサポートするために、共有レイアウトデータはサーバーから再フェッチされません。
  • ブラウザがスクロール位置を復元できるように、前後へのナビゲーションは引き続きキャッシュから復元されます。
  • loading.jsは、5分間（またはstaleTimes.static設定の値）キャッシュされたままになります。

以前のクライアントルーターキャッシュの動作を有効にするには、次の設定を行います。

next.config.ts
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基調講演をご覧ください。

Pages Router on React 18

Next.js 15は、React 18とのPages Routerの下位互換性を維持しており、ユーザーはReact 18を引き続き使用しながら、Next.js 15の改善点を活用できます。

最初のリリース候補（RC1）以来、コミュニティからのフィードバックに基づいてReact 18のサポートに重点を置いてきました。この柔軟性により、React 18でPages Routerを使用しながらNext.js 15を採用し、アップグレードパスをより細かく制御できます。

注記：同じアプリケーションでPages RouterをReact 18で、App RouterをReact 19で実行することは可能ですが、この設定はお勧めしません。そうすると、基盤となるAPIとレンダリングロジックの間に完全な整合性が取れないため、予期しない動作や型定義の不一致が発生する可能性があります。

Reactコンパイラ（実験的機能）

Reactコンパイラは、MetaのReactチームによって作成された新しい実験的なコンパイラです。このコンパイラは、プレーンなJavaScriptのセマンティクスとReactのルールを深く理解することでコードを深く理解し、コードに自動最適化を追加できます。このコンパイラは、useMemoやuseCallbackなどのAPIによる手動でのメモ化の量を減らし、コードをシンプルで保守しやすく、エラーが発生しにくくします。

Next.js 15では、Reactコンパイラのサポートを追加しました。Reactコンパイラと利用可能なNext.js設定オプションの詳細については、こちらをご覧ください。

注記：Reactコンパイラは現在、Babelプラグインとしてのみ使用できます。そのため、開発とビルド時間が遅くなります。

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

Next.js 14.1は、エラーメッセージとハイドレーションエラーを改善しました。Next.js 15では、改良されたハイドレーションエラービューを追加することで、それらをさらに強化しています。ハイドレーションエラーには、問題に対処する方法に関する提案とともに、エラーのソースコードが表示されるようになりました。

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

Hydration error message in Next.js 14.1

Next.js 15では、これが改善されました。

Hydration error message improved in 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に関する詳細は、新しいブログ記事をご覧ください。

静的ルートインジケーター

開発中に、Next.jsは静的ルートインジケーターを表示するようになり、どのルートが静的か動的かを識別しやすくなりました。この視覚的な手がかりにより、ページのレンダリング方法を理解することで、パフォーマンスの最適化が容易になります。

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

このアップデートは、Next.jsにおける可観測性を向上させるための継続的な取り組みの一環であり、開発者がアプリケーションの監視、デバッグ、最適化を容易に行えるようにすることを目的としています。また、専用の開発ツールについても取り組んでおり、詳細については近日中に発表予定です。

静的ルートインジケーターの詳細（無効化する方法を含む）については、こちらをご覧ください。

レスポンス後のコード実行：`unstable_after`の使用（実験的）

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

これらのタスクはレスポンスに直接関係しないため、ユーザーは完了を待つ必要はありません。レスポンスをユーザーに送信した後に作業を遅延させることは困難です。なぜなら、サーバーレス関数はレスポンスが閉じられた直後に計算を停止するためです。

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

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

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

その後、サーバーコンポーネント、サーバーアクション、ルートハンドラー、またはミドルウェアで関数をインポートします。

import { unstable_after as after } from 'next/server';
import { log } from '@/app/utils';
 
export default function Layout({ children }) {
  // Secondary task
  after(() => {
    log();
  });
 
  // Primary task
  return <>{children}</>;
}

unstable_afterの詳細については、こちらをご覧ください。

instrumentation.js（安定版）

register() API を備えた instrumentation ファイルを使用すると、Next.js サーバーのライフサイクルにアクセスしてパフォーマンスを監視し、エラーの原因を特定し、OpenTelemetryなどの可観測性ライブラリと深く統合できます。

この機能は現在安定版となっており、experimental.instrumentationHook構成オプションは削除できます。

さらに、Sentryと協力して、新しいonRequestErrorフックを設計しました。これを使用すると、

  • サーバーで発生したすべてのエラーに関する重要なコンテキストをキャプチャできます。これには、
    • ルーター：ページルーターまたはアプリルーター
    • サーバーコンテキスト：サーバーコンポーネント、サーバーアクション、ルートハンドラー、またはミドルウェア
  • お好みの可観測性プロバイダーにエラーを報告します。
export async function onRequestError(err, request, context) {
  await fetch('https://...', {
    method: 'POST',
    body: JSON.stringify({ message: err.message, request, context }),
    headers: { 'Content-Type': 'application/json' },
  });
}
 
export async function register() {
  // init your favorite observability provider SDK
}

onRequestError関数の詳細については、こちらをご覧ください。

<Form>コンポーネント

新しい<Form>コンポーネントは、HTMLの<form>要素をプリフェッチ、クライアントサイドナビゲーション、そして漸進的エンハンスメントで拡張します。

これは、結果ページに移動する検索フォームなど、新しいページに移動するフォームに役立ちます。

app/page.jsx
import Form from 'next/form';
 
export default function Page() {
  return (
    <Form action="/search">
      <input name="query" />
      <button type="submit">Submit</button>
    </Form>
  );
}

<Form>コンポーネントには、以下の機能があります。

  • プリフェッチ：フォームが表示範囲内にある場合、レイアウトとローディングUIがプリフェッチされ、ナビゲーションが高速になります。
  • クライアントサイドナビゲーション：送信時に、共有レイアウトとクライアントサイドの状態が保持されます。
  • 漸進的エンハンスメント：JavaScriptがまだ読み込まれていない場合でも、フォームはフルページナビゲーションで機能します。

これまでは、これらの機能を実現するために多くの手動によるボイラープレートコードが必要でした。例：

例
// Note: This is abbreviated for demonstration purposes.
// Not recommended for use in production code.
 
'use client'
 
import { useEffect } from 'react'
import { useRouter } from 'next/navigation'
 
export default function Form(props) {
  const action = props.action
  const router = useRouter()
 
  useEffect(() => {
    // if form target is a URL, prefetch it
    if (typeof action === 'string') {
      router.prefetch(action)
    }
  }, [action, router])
 
  function onSubmit(event) {
    event.preventDefault()
 
    // grab all of the form fields and trigger a `router.push` with the data URL encoded
    const formData = new FormData(event.currentTarget)
    const data = new URLSearchParams()
 
    for (const [name, value] of formData) {
      data.append(name, value as string)
    }
 
    router.push(`${action}?${data.toString()}`)
  }
 
  if (typeof action === 'string') {
    return <form onSubmit={onSubmit} {...props} />
  }
 
  return <form {...props} />
}

<Form>コンポーネントの詳細については、こちらをご覧ください。

next.config.tsのサポート

Next.jsはTypeScriptのnext.config.tsファイルタイプをサポートするようになり、自動補完とタイプセーフなオプションのためにNextConfigタイプを提供します。

next.config.ts
import type { NextConfig } from 'next';
 
const nextConfig: NextConfig = {
  /* config options here */
};
 
export default nextConfig;

Next.jsにおけるTypeScriptサポートの詳細については、こちらをご覧ください。

セルフホスティングの改善

アプリケーションをセルフホスティングする際には、Cache-Controlディレクティブをより細かく制御する必要がある場合があります。

一般的なケースの1つは、ISRページに送信されるstale-while-revalidate期間の制御です。2つの改善を行いました。

  1. next.configでexpireTime値を構成できるようになりました。以前はexperimental.swrDeltaオプションでした。
  2. デフォルト値を1年に更新し、ほとんどのCDNが意図したとおりにstale-while-revalidateセマンティクスを完全に適用できるようにしました。

また、デフォルト値でカスタムCache-Control値を上書きしなくなりました。これにより、完全な制御が可能になり、任意のCDN設定との互換性が確保されます。

最後に、セルフホスティング時の画像最適化を改善しました。以前は、Next.jsサーバーで画像を最適化するためにsharpをインストールすることを推奨していました。この推奨事項は見過ごされることがありました。Next.js 15では、next startを使用するか、スタンドアロン出力モードで実行する場合、sharpを手動でインストールする必要はありません。Next.jsが自動的にsharpを使用します。

詳細については、Next.jsのセルフホスティングに関する新しいデモとチュートリアルビデオをご覧ください。

サーバーアクションのセキュリティ強化

サーバーアクションは、クライアントから呼び出すことができるサーバーサイド関数です。ファイルの先頭に'use server'ディレクティブを追加し、非同期関数をエクスポートすることで定義されます。

サーバーアクションやユーティリティ関数がコードの他の場所でインポートされていなくても、公開可能なHTTPエンドポイントです。この動作は技術的には正しいものの、意図しない関数の公開につながる可能性があります。

セキュリティを向上させるために、以下の強化を行いました。

  • デッドコード除去：使用されていないサーバーアクションのIDは、クライアント側のJavaScriptバンドルに公開されなくなります。これにより、バンドルサイズが削減され、パフォーマンスが向上します。
  • セキュアなアクションID：Next.jsは、クライアントがサーバーアクションを参照して呼び出すことができる、推測不可能で非決定論的なIDを作成するようになりました。これらのIDは、セキュリティ強化のためにビルド間で定期的に再計算されます。
// app/actions.js
'use server';
 
// This action **is** used in our application, so Next.js
// will create a secure ID to allow the client to reference
// and call the Server Action.
export async function updateUserAction(formData) {}
 
// This action **is not** used in our application, so Next.js
// will automatically remove this code during `next build`
// and will not create a public endpoint.
export async function deleteUserAction(formData) {}

サーバーアクションは引き続き公開HTTPエンドポイントとして扱う必要があります。サーバーアクションの保護の詳細については、こちらをご覧ください。

外部パッケージのバンダリング最適化 (安定版)

外部パッケージのバンダリングは、アプリケーションの初回起動パフォーマンスを向上させることができます。App Routerでは、外部パッケージはデフォルトでバンドルされます。新しいserverExternalPackages設定オプションを使用して、特定のパッケージをオプトアウトできます。

Pages Routerでは、外部パッケージはデフォルトではバンドルされませんが、既存のtranspilePackagesオプションを使用して、バンドルするパッケージのリストを指定できます。この設定オプションでは、各パッケージを個別に指定する必要があります。

App RouterとPages Routerの設定を統一するために、App Routerのデフォルトの自動バンダリングに合わせて、新しいオプションbundlePagesRouterDependenciesを導入します。必要に応じて、serverExternalPackagesを使用して特定のパッケージをオプトアウトできます。

next.config.ts
const nextConfig = {
  // Automatically bundle external packages in the Pages Router:
  bundlePagesRouterDependencies: true,
  // Opt specific packages out of bundling for both App and Pages Router:
  serverExternalPackages: ['package-name'],
};
 
export default nextConfig;

外部パッケージの最適化の詳細については、こちらをご覧ください。

ESLint 9のサポート

Next.js 15では、2024年10月5日のESLint 8のサポート終了に伴い、ESLint 9のサポートも導入されました。

円滑な移行を確保するために、Next.jsは後方互換性を維持します。つまり、ESLint 8と9のどちらを使用し続けることもできます。

ESLint 9にアップグレードし、新しい設定形式をまだ採用していないことが検出された場合、Next.jsは自動的にESLINT_USE_FLAT_CONFIG=falseエスケープハッチを適用して移行を容易にします。

さらに、—extや—ignore-pathなどの非推奨オプションは、next lintを実行すると削除されます。ESLintは最終的にESLint 10でこれらの古い設定を許可しなくなるため、早めの移行を開始することをお勧めします。

これらの変更の詳細については、移行ガイドをご覧ください。

この更新の一環として、eslint-plugin-react-hooksをv5.0.0にアップグレードしました。これにより、React Hooksの使用に関する新しいルールが導入されます。eslint-plugin-react-hooks@5.0.0の変更ログで、すべての変更を確認できます。

開発とビルドの改善

サーバーコンポーネントのHMR

開発中は、サーバーコンポーネントは保存時に再実行されます。つまり、APIエンドポイントやサードパーティサービスへのすべてのfetchリクエストも呼び出されます。

ローカル開発のパフォーマンスを向上させ、課金対象のAPI呼び出しにかかるコストを削減するために、Hot Module Replacement (HMR)で以前のレンダリングからのfetchレスポンスを再利用できるようにしました。

サーバーコンポーネントのHMRキャッシュの詳細については、こちらをご覧ください。

App Routerの静的生成速度向上

特にネットワークリクエストが遅いページについて、ビルド時間を改善するために静的生成を最適化しました。

以前は、静的最適化プロセスでページを2回レンダリングしていました。1回目はクライアント側のナビゲーション用のデータ生成、2回目は最初のページ訪問用のHTMLレンダリングです。現在は、最初のレンダリングを再利用することで2回目の処理を省き、ワークロードとビルド時間を削減しています。

さらに、静的生成ワーカーは、ページ間でfetchキャッシュを共有するようになりました。fetch呼び出しがキャッシュをオプトアウトしない場合、その結果は同じワーカーによって処理される他のページによって再利用されます。これにより、同じデータに対するリクエスト数が削減されます。

高度な静的生成制御 (実験的)

高度なユースケースでより詳細な制御が必要な場合に対応するため、静的生成プロセスの制御を強化する実験的なサポートを追加しました。

これらのオプションは、並行処理の増加によりリソース使用量が増加し、メモリ不足エラーが発生する可能性があるため、特別な要件がない限り、現在のデフォルトを使用することをお勧めします。

next.config.ts
const nextConfig = {
  experimental: {
    // how many times Next.js will retry failed page generation attempts
    // before failing the build
    staticGenerationRetryCount: 1
    // how many pages will be processed per worker
    staticGenerationMaxConcurrency: 8
    // the minimum number of pages before spinning up a new export worker
    staticGenerationMinPagesPerWorker: 25
  },
}
 
export default nextConfig;

静的生成オプションの詳細については、こちらをご覧ください。

その他の変更

  • [破壊的変更] next/image: オプション依存関係としてsquooshを削除し、sharpを使用するようになりました(PR)
  • [破壊的変更] next/image: デフォルトのContent-Dispositionをattachmentに変更しました(PR)
  • [破壊的変更] next/image: srcに先頭または末尾にスペースがある場合にエラーが発生するようになりました(PR)
  • [破壊的変更] ミドルウェア: 推奨されないReact APIインポートを制限するために、react-server条件を適用しました(PR)
  • [破壊的変更] next/font: 外部@next/fontパッケージのサポートを削除しました(PR)
  • [破壊的変更] next/font: font-familyハッシュを削除しました(PR)
  • [破壊的変更] キャッシュ: force-dynamicは、fetchキャッシュにno-storeデフォルトを設定するようになりました(PR)
  • 【破壊的変更】 設定: swcMinify、missingSuspenseWithCSRBailout、およびoutputFileTracingの動作をデフォルトで有効化し、非推奨オプションを削除しました (PR)
  • 【破壊的変更】 Speed Insights の自動インストルメンテーションを削除しました（専用パッケージの@vercel/speed-insights を使用する必要があります）(PR)
  • 【破壊的変更】 動的サイトマップルートの.xml拡張子を削除し、開発環境と本番環境間のサイトマップURLを揃えました (PR)
  • 【破壊的変更】 App Router でexport const runtime = "experimental-edge" のエクスポートを非推奨としました。代わりにexport const runtime = "edge"を使用してください。この変更を行うためのcodemodを追加しました (PR)
  • 【破壊的変更】 レンダリング中にrevalidateTagとrevalidatePathを呼び出すと、エラーが発生するようになりました (PR)
  • 【破壊的変更】 instrumentation.jsとmiddleware.jsファイルは、バンドルされたReactパッケージを使用するようになりました (PR)
  • 【破壊的変更】 Node.jsの最小必要バージョンが18.18.0に更新されました (PR)
  • 【破壊的変更】 next/dynamic: 非推奨のsuspenseプロパティを削除しました。App Routerで使用する場合、空のSuspense境界を挿入しなくなりました (PR)
  • 【破壊的変更】 Edge Runtimeでモジュールを解決する際、workerモジュール条件は適用されなくなりました (PR)
  • 【破壊的変更】 Server Componentsでnext/dynamicと共にssr: falseオプションを使用することは禁止されました (PR)
  • 【改善】 メタデータ: Vercelでホストされている場合のmetadataBaseに対する環境変数のフォールバックを更新しました (PR)
  • 【改善】 optimizePackageImportsからの名前空間インポートと名前付きインポートが混在する場合のツリーシェイキングを修正しました (PR)
  • 【改善】 並列ルート: 一致しないキャッチオールルートに、既知のパラメータをすべて提供するようになりました (PR)
  • 【改善】 設定bundlePagesExternalsが安定版になり、bundlePagesRouterDependenciesに名前が変更されました。
  • 【改善】 設定serverComponentsExternalPackagesが安定版になり、serverExternalPackagesに名前が変更されました。
  • 【改善】 create-next-app: 新しいプロジェクトはデフォルトですべての.envファイルを無視するようになりました (PR)
  • 【改善】 outputFileTracingRoot、outputFileTracingIncludes、およびoutputFileTracingExcludesが実験段階から卒業し、安定版になりました (PR)
  • 【改善】 ツリー内でより深い位置にあるCSSモジュールファイルとグローバルCSSファイルをマージしないようにしました (PR)
  • 【改善】 キャッシュハンドラーは、NEXT_CACHE_HANDLER_PATH環境変数で指定できるようになりました (PR)
  • 【改善】 Pages Routerは、React 18とReact 19の両方をサポートするようになりました (PR)
  • 【改善】 インスペクターが有効になっている場合、エラーオーバーレイにNode.jsインスペクターURLをコピーするボタンが表示されるようになりました (PR)
  • 【改善】 App Routerでのクライアントプリフェッチは、priority属性を使用するようになりました (PR)
  • [改善] Next.jsは、App RouterでNext.js内部エラーを再スローするためのunstable_rethrow関数を提供するようになりました（PR)
  • [改善] 静的ページでもunstable_afterを使用できるようになりました（PR)
  • [改善] SSR中にnext/dynamicコンポーネントを使用する場合、チャンクがプリフェッチされるようになりました（PR)
  • [改善] App RouterでesmExternalsオプションがサポートされるようになりました（PR)
  • [改善] デバッグ目的でnext buildにNODE_ENV=developmentを使用できるように、experimental.allowDevelopmentBuildオプションを使用できるようになりました（PR)
  • [改善] Pages Routerでは、Server Action変換が無効化されるようになりました（PR)
  • [改善] ビルドワーカーは、終了時にビルドがハングするのを防ぐようになりました（PR)
  • [改善] Server Actionからのリダイレクト時、再検証が正しく適用されるようになりました（PR)
  • [改善] Edge Runtimeで、並列ルートの動的パラメーターが正しく処理されるようになりました（PR)
  • [改善] 静的ページは、初回読み込み後もstaleTimeを尊重するようになりました（PR)
  • [改善] メモリリーク修正を含むvercel/ogのアップデート（PR)
  • [改善] APIのモックにmswなどのパッケージを使用できるように、パッチタイミングを更新しました（PR)
  • [改善] プリレンダリングされたページは、静的なstaleTimeを使用するようになりました（PR)

詳細については、アップグレードガイドをご覧ください。

貢献者

Next.jsは、3,000人以上の個々の開発者、GoogleやMetaなどの業界パートナー、そしてVercelのコアチームによる共同作業の成果です。このリリースは、下記の方々によって実現しました。

以下の方々に多大な感謝を申し上げます：@AbhiShake1、@Aerilym、@AhmedBaset、@AnaTofuZ、@Arindam200、@Arinji2、@ArnaudFavier、@ArnoldVanN、@Auxdible、@B33fb0n3、@Bhavya031、@Bjornnyborg、@BunsDev、@CannonLock、@CrutchTheClutch、@DeepakBalaraman、@DerTimonius、@Develliot、@EffectDoplera、@Ehren12、@Ethan-Arrowood、@FluxCapacitor2、@ForsakenHarmony、@Francoscopic、@Gomah、@GyoHeon、@Hemanshu-Upadhyay、@HristovCodes、@HughHzyb、@IAmKushagraSharma、@IDNK2203、@IGassmann、@ImDR、@IncognitoTGT、@Jaaneek、@JamBalaya56562、@Jeffrey-Zutt、@JohnGemstone、@JoshuaKGoldberg、@Julian-Louis、@Juneezee、@KagamiChan、@Kahitar、@KeisukeNagakawa、@KentoMoriwaki、@Kikobeats、@KonkenBonken、@Kuboczoch、@Lada496、@LichuAcu、@LorisSigrist、@Lsnsh、@Luk-z、@Luluno01、@M-YasirGhaffar、@Maaz-Ahmed007、@Manoj-M-S、@ManuLpz4、@Marukome0743、@MaxLeiter、@MehfoozurRehman、@MildTomato、@MonstraG、@N2D4、@NavidNourani、@Nayeem-XTREME、@Netail、@NilsJacobsen、@Ocheretovich、@OlyaPolya、@PapatMayuri、@PaulAsjes、@PlagueFPS、@ProchaLu、@Pyr33x、@QiuranHu、@RiskyMH、@Sam-Phillemon9493、@Sayakie、@Shruthireddy04、@SouthLink、@Strift、@SukkaW、@Teddir、@Tim-Zj、@TrevorSayre、@Unsleeping、@Willem-Jaap、@a89529294、@abdull-haseeb、@abhi12299、@acdlite、@actopas、@adcichowski、@adiguno、@agadzik、@ah100101、@akazwz、@aktoriukas、@aldosch、@alessiomaffeis、@allanchau、@alpedia0、@amannn、@amikofalvy、@anatoliik-lyft、@anay-208、@andrii-bodnar、@anku255、@ankur-dwivedi、@aralroca、@archanaagivale30、@arlyon、@atik-persei、@avdeev、@baeharam、@balazsorban44、@bangseongbeom、@begalinsaf、@bennettdams、@bewinsnw、@bgw、@blvdmitry、@bobaaaaa、@boris-szl、@bosconian-dynamics、@brekk、@brianshano、@cfrank、@chandanpasunoori、@chentsulin、@chogyejin、@chrisjstott、@christian-bromann、@codeSTACKr、@coderfin、@coltonehrman、@controversial、@coopbri、@creativoma、@crebelskydico、@crutchcorn、@darthmaim、@datner、@davidsa03、@delbaoliveira、@devjiwonchoi、@devnyxie、@dhruv-kaushik、@dineshh-m、@diogocapela、@dnhn、@domdomegg、@domin-mnd、@dvoytenko、@ebCrypto、@ekremkenter、@emmerich、@flybayer、@floriangosse、@forsakenharmony、@francoscopic、@frys、@gabrielrolfsen、@gaojude、@gdborton、@greatvivek11、@gnoff、@guisehn、@GyoHeon、@hamirmahal、@hiro0218、@hirotomoyamada、@housseindjirdeh、@hungdoansy、@huozhi、@hwangstar156、@iampoul、@ianmacartney、@icyJoseph、@ijjk、@imddc、@imranolas、@iscekic、@jantimon、@jaredhan418、@jeanmax1me、@jericopulvera、@jjm2317、@jlbovenzo、@joelhooks、@joeshub、@jonathan-ingram、@jonluca、@jontewks、@joostmeijles、@jophy-ye、@jordienr、@jordyfontoura、@kahlstrm、@karlhorky、@karlkeefer、@kartheesan05、@kdy1、@kenji-webdev、@kevva、@khawajaJunaid、@kidonng、@kiner-tang、@kippmr、@kjac、@kjugi、@kshehadeh、@kutsan、@kwonoj、@kxlow、@leerob、@lforst、@li-jia-nan、@liby、@lonr、@lorensr、@lovell、@lubieowoce、@luciancah、@luismiramirez、@lukahartwig、@lumirlumir、@luojiyin1987、@mamuso、@manovotny、@marlier、@mauroaccornero、@maxhaomh、@mayank1513、@mcnaveen、@md-rejoyan-islam、@mehmetozguldev、@mert-duzgun、@mirasayon、@mischnic、@mknichel、@mobeigi、@molebox、@mratlamwala、@mud-ali、@n-ii-ma、@n1ckoates、@nattui、@nauvalazhar、@neila-a、@neoFinch、@niketchandivade、@nisabmohd、@none23、@notomo、@notrab、@nsams、@nurullah、@okoyecharles、@omahs、@paarthmadan、@pathliving、@pavelglac、@penicillin0、@phryneas、@pkiv、@pnutmath、@qqww08、@r34son、@raeyoung-kim、@remcohaszing、@remorses、@rezamauliadi、@rishabhpoddar、@ronanru、@royalfig、@rubyisrust、@ryan-nauman、@ryohidaka、@ryota-murakami、@s-ekai、@saltcod、@samcx、@samijaber、@sean-rallycry、@sebmarkbage、@shubh73、@shuding、@sirTangale、@sleevezip、@slimbde、@soedirgo、@sokra、@sommeeeer、@sopranopillow、@souporserious、@srkirkland、@steadily-worked、@steveluscher、@stipsan、@styfle、@stylessh、@syi0808、@symant233、@tariknh、@theoludwig、@timfish、@timfuhrmann、@timneutkens、@tknickman、@todor0v、@tokkiyaa、@torresgol10、@tranvanhieu01012002、@txxxxc、@typeofweb、@unflxw、@unstubbable、@versecafe、@vicb、@vkryachko、@wbinnssmith、@webtinax、@weicheng95、@wesbos、@whatisagi、@wiesson、@woutvanderploeg、@wyattjoh、@xiaohanyu、@xixixao、@xugetsu、@yosefbeder、@ypessoa、@ytori、@yunsii、@yurivangeffen、@z0n、@zce、@zhawtof、@zsh77、そして @ztanner のご協力に感謝いたします！