最適化

Next.jsには、アプリケーションの速度とCore Web Vitalsを向上させるために設計された、さまざまな組み込みの最適化機能が用意されています。このガイドでは、ユーザーエクスペリエンスを向上させるために利用できる最適化について説明します。

組み込みコンポーネント

組み込みコンポーネントは、一般的なUI最適化の実装の複雑さを抽象化します。これらのコンポーネントは次のとおりです。

Images: ネイティブの<img>要素に基づいて構築されています。Imageコンポーネントは、遅延読み込みやデバイスサイズに応じた画像の自動リサイズにより、画像のパフォーマンスを最適化します。
Link: ネイティブの<a>タグに基づいて構築されています。Linkコンポーネントは、ページのプリフェッチをバックグラウンドで行い、より高速でスムーズなページ遷移を実現します。
Scripts: ネイティブの<script>タグに基づいて構築されています。Scriptコンポーネントは、サードパーティスクリプトの読み込みと実行を制御する機能を提供します。

メタデータは、検索エンジンがコンテンツをよりよく理解するのに役立ち（これによりSEOが向上する可能性があります）、ソーシャルメディアでのコンテンツの表示方法をカスタマイズできるため、さまざまなプラットフォームでより魅力的で一貫性のあるユーザーエクスペリエンスを作成できます。

Next.jsのHeadコンポーネントを使用すると、ページの<head>を変更できます。詳細については、Headコンポーネントのドキュメントを参照してください。

Next.jsの/publicフォルダーは、画像、フォント、その他のファイルなどの静的アセットを提供するために使用できます。/public内のファイルは、CDNプロバイダーによってキャッシュされ、効率的に配信することもできます。

大規模なアプリケーションの場合、Next.jsは一般的なアナリティクスおよびモニタリングツールと統合されており、アプリケーションのパフォーマンスを理解するのに役立ちます。アナリティクス、 OpenTelemetry,およびインストルメンテーションの各ガイドで詳細を確認してください。

お役に立ちましたか？