最適化

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

組み込みコンポーネント

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

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

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

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

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

大規模なアプリケーション向けに、Next.jsは人気のあるアナリティクスおよびモニタリングツールと統合されており、アプリケーションのパフォーマンスを理解するのに役立ちます。詳細はアナリティクス、OpenTelemetry、およびインストルメンテーションガイドをご覧ください。