1740810238
2025-02-28 10:17:00
next.js 15.2には、デバッグエラー、メタデータ、ターボパックなどの更新が含まれています。
今日アップグレードするか、始めましょう：
# Use the automated upgrade CLI
npx @next/codemod@canary upgrade latest
# ...or upgrade manually
npm install next@latest react@latest react-dom@latest
# ...or start a new project
npx create-next-app@latestアプリケーションの構築中に遭遇する可能性のあるエラーに視覚的および品質の両方の改善を追加しました。改善の各領域を歩きましょう。
エラーオーバーレイ
next.jsでUIとエラーメッセージのプレゼンテーションをオーバーホールし、理解しやすくしました。新しいデザインは、メッセージ、関連するコードフレーム、コールスタックなど、エラーのコアの詳細を強調していますが、ライブラリまたは依存関係のコードからノイズを削減します。これは、間違ったことの根本にすばやく到達し、より速く修正を開始できることを意味します。
新しく導入されたものを活用します 所有者スタック Reactの機能では、エラーが発生している場所に忠実度を高めることができます。 Next.jsは、エラーを投げる責任のあるサブコンポーネントを表現し、エラーの原因となる要素の作成に責任がなかった中間要素をスキップできます。
また、構成を追加する必要なく、インジケーターの設定を簡単にカスタマイズできるようにしています。
エラーオーバーレイの下部にフィードバックセクションを追加しました。これにより、エラーメッセージがどれだけ役立つかを評価できます。あなたの意見は、私たちが一般的な問題点を理解し、エラーメッセージを改善してデバッグを容易にするのに役立ちます。
開発インジケーター
開発情報を、レンダリングモードやビルドステータスなどの詳細を示す新しい合理化されたインジケーターに統合しました。
コンピレーション中、ルート間をナビゲートするときに、薄暗い、アニメーション化されたnext.jsロゴが気付くでしょう。コンピレーションが完了するとロゴが明るくなり、Reactがレンダリングを開始し、アプリケーションの状態の視覚的な手がかりを提供します。
DEVインジケーターを開く今すぐ表示します。
- 現在のルートのレンダリングモード（静的/動的）
- ターボパックコンピレーションステータス
- エラーオーバーレイにすばやくアクセスできるアクティブなエラー
将来の更新により、このメニューが拡張されます。
- PPR（部分的なプレレンダリング）デバッグツール
- キャッシュ監視機能
- 追加の開発者ツール
この統一されたアプローチは、すべての重要な開発情報を1つのアクセス可能な場所に配置します。フィードバックに基づいて、今後のリリースでこの機能を改良および拡張し続けます。
多くの場合、動的なデータを取得したり、非同期操作を実行したりする必要があります。 generateMetadata。 next.jsの以前のバージョンでは、このメタデータが最初のUIが送信される前に生成を終了する必要があるため、ドキュメントに含めることができます .
This meant that for many pages where a fast initial UI was available, the initial paint was still delayed by data requirements that did not affect what the user would see visually. We’ve improved this in 15.2 by allowing the initial UI to be sent to the browser even before generateMetadata 完了しました。
ただし、メタデータが利用可能になることを期待するボットやクローラーとの互換性を維持するために of the document, we continue to delay sending HTML to certain bot user agents. If you need more fine-grained control over which bots receive this treatment, you can customize the regex used to serve them via the htmlLimitedBots でオプション next.config.js。
詳細をご覧ください ストリーミングメタデータ。
ターボパックは安定してマークされていました next.js 15。
私たちは、特に永続的なキャッシュなしで、ターボパックのパフォーマンスの向上に取り組んできました。このリリースの一環として、次の拡張機能を紹介しました。
- より速いコンパイル時間： 早期採用者が報告しています 57.6％速いコンパイル時間 next.js 15.1と比較してルートにアクセスする場合。
- メモリ使用量の減少： のために vercel.com アプリケーション、aを観察しました メモリ使用量が30％減少します ローカル開発中。
これらの改善により、Turbopackは、ほぼすべての場合にWebpackよりも高速になるはずです。これがアプリケーションに当てはまらないシナリオに遭遇した場合は、手を差し伸べてください。これらを調査したいと思います。
また、永続的なキャッシュと生産の構築についても進歩しました。これらの機能はまだ実験的なリリースの準備ができていませんが、実際のプロジェクトでテストを開始しました。より幅広い用途で利用できるようになったら、より詳細なメトリックを共有します。
新しい実験ビュー遷移APIをReactで有効にするための機能フラグを追加しました。この新しいAPIを使用すると、アプリケーション内のさまざまなビューとコンポーネント間でアニメーション化できます。
この機能を有効にするには、次の機能を追加します next.config.js：
module.exports = {
experimental: {
viewTransition: true,
},
};注記： この機能は非常に実験的であり、将来のリリースで変化する可能性があります。
この機能の使用方法の詳細については、 オリジナルビュートランジションプルリクエスト Reactリポジトリ内。この作業は、ビュートランジションのネイティブブラウザの実装に基づいています。
安定性が進むにつれて、より多くのドキュメントと例を公開します。
Next.jsミドルウェアにnode.jsランタイムを使用することを許可するために、新しい実験フラグに取り組んできました。
この機能を有効にするには、次の機能を追加します next.config.js：
module.exports = {
experimental: {
nodeMiddleware: true,
},
};その後、ミドルウェアでnode.jsランタイムを指定できます config 輸出：
import bcrypt from 'bcrypt';
const API_KEY_HASH = process.env.API_KEY_HASH; // Pre-hashed API key in env
export default async function middleware(req) {
const apiKey = req.headers.get('x-api-key');
if (!apiKey || !(await bcrypt.compare(apiKey, API_KEY_HASH))) {
return new Response('Forbidden', { status: 403 });
}
console.log('API key validated');
}
export const config = {
runtime: 'nodejs',
};注記： この機能は、生産の使用にはまだ推奨されていません。したがって、next.jsは、
next@canary安定したリリースの代わりにリリース。
この機会を利用して、ミドルウェアAPIを改善および再構築することを計画しています。提案やリクエストがある場合は、お知らせください。 node.jsミドルウェアはコミュニティのトップリクエストであり、これに対処できることを楽しみにしています。
- 「キャッシュを使用」（ベータ）：私たちは安定化に取り組んできました
"use cache"スタンドアロン機能として。今後のリリースの詳細については、お楽しみに。詳細をご覧ください"use cache"。 - ターボパック永続的なキャッシュ（実験的）：私たちは、ヴェルセルでのドッグフーディングの永続的なキャッシングを、プラスのパフォーマンスを改善しました。さらに安定したら、追加のフィードバックとテストのために機能フラグの後ろにリリースします。
- [Feature] 追加
--apiヘッドレスアピオンを作成するフラグcreate-next-app（Pr）） - [Feature] サポートを追加します
images.qualitiesとnext/image（Pr）） - [Deprecation] アプリルーターのI18N構成の非推奨について警告します（Pr））
- [Improvement] の糸くずのパフォーマンスを改善します
no-html-link-for-pages（Pr）） - [Improvement] if
"use action"指令が誤って使用されます（Pr）） - [Improvement] 画面
global-error開発中の開発オーバーレイと並んで（Pr）） - [Improvement] 開発サーバーでHTTP要求ログを無効にすることを許可します（Pr））
- [Improvement] ページネーションSEOリンクタグを追加します（Pr））
- [Improvement] JSDOCを改善します
metadataそしてコンポーネント（Pr）） - [Improvement] ミドルウェアは一致するはずです
next/imageリクエスト（Pr）） - [Improvement] デフォルトのエラー境界メッセージにホスト名を追加します（Pr））
- [Improvement] 明示的なエラー境界によって処理されないエラーを送信します
reportError（Pr））
Next.jsは、3,000人以上の個々の開発者の組み合わせ作業の結果です。このリリースは次のように届きました。
- next.js チーム： アンドリュー、 ヘンドリック、 ジャンカ、 ジア、 ジミー、 ジウォン、 JJ、 ジョシュ、 ジュード、 サム、 セバスチャン、 セビー、 ワイアット、 そして ザック。
- ターボパック チーム： ベンジャミン、 ドニー、 マイア、 ニクラス、 ティム、 トビアス、 そして 意思。
- next.js docs チーム： デルバ、 リッチ、 イスマエル、 そして リー。
@mischnic、 @marukome0743、 @jambalaya56562、 @creationix、 @noiller、@styfle、@abdonrd、@aymericzip、 @davidhu2000、@telarepka、@devpla、 @dydals340、@huozhi、 @wbinnssmith、 @suu3、@papatmayyuri、 @sahil4888、@abyii、 @molebox、 @sokra、 @damiensedgwick、@alitas、 @riskymh、 @sommeer、 @som @spidersouris、 @gurkerl83、 @cassantos、@netail、@tknickman、 @cseas、@nnnoel、 @manoj-ms、 @manoj-ms、 @matmaninon、 @mikeboensel、@nphmuler、@aposolos、 @k15a、 @daveave @vexcat、 @Zach-jaensch、@decepulis、 @gadcam、 @lukahartwig、 @jananford8、 @runoforiberg、 @runofreiberg、 @mohsen1、 @mohsen1、@skushagra、 @mannn、 @hqidea、 @Jrandolf、 @smiterr、 @k35o、 @martinsione、@cvx、 @msereniti、@temer、 @chibicode、 @robpuruzan、 @byunix、 @bjunix、 @maximevtush、 @michaelven、 @johhannpinson、 @axeluser、 @naayem-xtreme、@blug、@blug、@blug、@blug、@blug、@blug、 @lachlanjc、 @ashi009、 @conco974、 @raphaelcosta、@dulmandakh、@khuezy、 @knoa0405、 @wangsijie、 @wentsul、 @loopy-lim、 @bratvananov、@hedgeday、 @cassian-goode！
#next.js #next.js