ホームページ ウェブフロントエンド jsチュートリアル NextJs の安定バージョンが登場 : 新機能は何ですか?

NextJs の安定バージョンが登場 : 新機能は何ですか?

Oct 23, 2024 am 06:28 AM

NextJs Stable Version Is Here : What

Next.js は 状況を一変させる爆弾を投下し、Next.js Conf のに Next.js 15 の安定版をリリースしました。 –そしてそれはまったく正気の沙汰ではありません! ?

Next.js 15 に詰め込まれた驚くべき新しい更新と機能の一部を以下に示します。

  • @next/codemod CLI によるアップグレードの改善: Next.js 15 には、最新の Next.js および React バージョンへのアップグレードが簡単になる新しい codemod CLI が含まれています。 CLI は依存関係を更新し、利用可能な codemod を表示し、それらを適用するためのガイダンスを提供します。
  • 非同期リクエスト API: ヘッダー、Cookie、params、searchParams などのリクエスト固有のデータに依存する API は、非同期に移行しました。この変更は、Cookie、ヘッダー、draftMode、params (さまざまなコンテキスト内)、searchParams などの API に影響します。これは重大な変更ですが、移行に役立つ codemod が利用可能です。
  • キャッシュ セマンティクスの変更: Next.js 15 では、フェッチ リクエスト、GET ルート ハンドラー、およびクライアント ルーター キャッシュのデフォルトのキャッシュ動作が変更されます。これらはデフォルトでキャッシュされなくなりました。必要に応じてキャッシュを選択できます。
    • フェッチ リクエストでは、デフォルトのキャッシュ オプションとして no-store が使用されるようになりました。つまり、デフォルトではキャッシュされません。キャッシュ オプションを強制キャッシュに設定することで、キャッシュをオプトインできます。
    • GET ルート ハンドラーもデフォルトではキャッシュされません。静的ルート構成オプションを使用してキャッシュを選択できます。
    • クライアント ルーター キャッシュは、デフォルトではページ コンポーネントをキャッシュしなくなりました。 next.config.ts で staleTime を設定することで、以前の動作に戻すことができます。
  • React 19 のサポート: Next.js 15 は、実験的な React コンパイラーを含む React 19 をサポートします。
    • App Router は React 19 RC を使用しますが、Pages Router では React 18 との下位互換性が維持されます。同じアプリケーション内で Pages Router に React 18 を使用し、App Router に React 19 を使用することは、潜在的な不一致のため推奨されません。
    • React コンパイラーは、手動によるメモ化を減らしてコードを簡素化することを目的としていますが、まだ実験段階にあるため、ビルド時間が遅くなる可能性があります。
  • 安定した Turbopack 開発: 新しい Rust ベースのビルド システムである Turbopack は、開発モード (next dev --turbo) で安定しました。これにより、サーバーの起動、高速リフレッシュ、および最初のルート コンパイルのパフォーマンスが大幅に向上します。
  • 静的ルート インジケーター: この新しい視覚的なインジケーターは、開発中に静的ルートと動的ルートを識別するのに役立ちます。
  • unstable_after API:unstable_after API を使用すると、応答のストリーミングが終了した後にコードを実行できます。これは、ログ記録や分析など、ユーザーをブロックする必要のないタスクに特に役立ちます。
  • instrumentation.js API: この API を使用すると、開発者は Next.js サーバーのライフサイクル イベントを監視でき、パフォーマンスの追跡やエラー分析に役立ちます。
  • によるフォームの機能強化コンポーネント: 新しい このコンポーネントは、プリフェッチ、クライアント側ナビゲーション、プログレッシブ エンハンスメントなどの機能によりフォーム処理を簡素化します。
  • next.config.ts での TypeScript のサポート: Next.js 15 は、TypeScript next.config.ts ファイルをサポートし、構成オプションのタイプ セーフティとオートコンプリートを提供します。
  • セルフホスティングの改善: Next.js 15 では、セルフホスティングの Cache-Control ヘッダーの制御が強化され、sharp を自動的に使用することで画像の最適化が簡素化され、セルフホスティングに関するデモとチュートリアル ビデオが含まれています。 .
  • サーバー アクションのセキュリティの強化: Next.js では、ビルド プロセス中に未使用のサーバー アクションが排除され、クライアント側の参照に予測不可能な ID が利用されるようになり、セキュリティが強化されました。
  • 外部パッケージのバンドル: Next.js 15 では、アプリ ルーターとページ ルーターの両方で外部パッケージをバンドルするための、より一貫した構成オプションが提供されます。 serverExternalPackages オプションを使用すると、統合管理が可能になります。
  • ESLint 9 サポート: Next.js 15 では、ESLint 8 との下位互換性を維持しながら ESLint 9 のサポートが導入されています。この更新には、次の lint での非推奨のオプションの削除と eslint-plugin-react- へのアップグレードも含まれています。バージョン 5.0.0.
  • へのフック
  • 開発とビルドの改善:
    • サーバー コンポーネントのホット モジュール交換 (HMR) が改善され、ローカル開発のパフォーマンスが向上しました。
    • 最適化されたレンダリング プロセスとワーカー間でのフェッチ キャッシュの共有により、App Router での静的生成が高速化されます。
    • 高度なユースケース向けに実験的な静的生成制御を導入しましたが、リソース消費の増加につながる可能性があるため注意が必要です。
  • その他:
    • next/image、ミドルウェア、next/font、キャッシュ、構成オプション、Speed Insights、サイトマップ、動的ルート、再検証など、さまざまな領域にわたる重大な変更と改善。
    • メタデータ処理、ツリーシェイキング、並列ルート、エラー処理、プリフェッチ、およびその他のいくつかの側面における全般的な改善。

「Next.js 15 リリースでは、サーバー側の機能が意図せず公開される問題にどのように対処しますか?」という疑問が生じます。

Next.js 15 リリースでは、サーバー側機能、特にサーバー アクションの意図しない公開に対処するための 2 つの機能強化が導入されています。

  • デッド コードの削除: アプリケーションで使用されていないサーバー アクションは、次のビルド プロセス中に自動的に削除されます。これにより、クライアント側の JavaScript バンドルに ID が公開されたり、パブリック エンドポイントが作成されたりすることがなくなります。
  • 安全なアクション ID: Next.js 15 は、サーバー アクションに対して推測不可能で非決定的な ID を生成するため、攻撃者が推測して直接アクセスすることが困難になります。これらの ID は、セキュリティをさらに強化するためにビルド間で定期的に再計算されます。

これらの対策はサーバーアクションの危険性を完全に排除するものではないことに注意することが重要です。開発者は引き続きサーバー アクションをパブリック HTTP エンドポイントとして扱い、機密データと機能を保護するための適切なセキュリティ対策を実装する必要があります。

以上がNextJs の安定バージョンが登場 : 新機能は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

JavaScriptエンジン:実装の比較 JavaScriptエンジン:実装の比較 Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析:ソースコードを語彙ユニットに変換します。 2。文法分析:抽象的な構文ツリーを生成します。 3。最適化とコンパイル:JITコンパイラを介してマシンコードを生成します。 4。実行:マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

Python vs. JavaScript:学習曲線と使いやすさ Python vs. JavaScript:学習曲線と使いやすさ Apr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

C/CからJavaScriptへ:すべてがどのように機能するか C/CからJavaScriptへ:すべてがどのように機能するか Apr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1)C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2)C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3)JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptとWeb:コア機能とユースケース JavaScriptとWeb:コア機能とユースケース Apr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1)DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2)ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3)サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScript in Action:実際の例とプロジェクト JavaScript in Action:実際の例とプロジェクト Apr 19, 2025 am 12:13 AM

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1)DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2)node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

JavaScriptエンジンの理解:実装の詳細 JavaScriptエンジンの理解:実装の詳細 Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1)エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2)実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3)ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Python vs. JavaScript:コミュニティ、ライブラリ、リソース Python vs. JavaScript:コミュニティ、ライブラリ、リソース Apr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1)Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2)Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3)どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

Python vs. JavaScript:開発環境とツール Python vs. JavaScript:開発環境とツール Apr 26, 2025 am 12:09 AM

開発環境におけるPythonとJavaScriptの両方の選択が重要です。 1)Pythonの開発環境には、Pycharm、Jupyternotebook、Anacondaが含まれます。これらは、データサイエンスと迅速なプロトタイピングに適しています。 2)JavaScriptの開発環境には、フロントエンドおよびバックエンド開発に適したnode.js、vscode、およびwebpackが含まれます。プロジェクトのニーズに応じて適切なツールを選択すると、開発効率とプロジェクトの成功率が向上する可能性があります。

See all articles