ホームページ  >  記事  >  ウェブフロントエンド  >  NextJs の安定バージョンが登場 : 新機能は何ですか?

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

Mary-Kate Olsen
Mary-Kate Olsenオリジナル
2024-10-23 06:28:01202ブラウズ

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 までご連絡ください。