最適化

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

組み込みコンポーネント

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

Images：ネイティブの<img>要素をベースにしています。Imageコンポーネントは、遅延読み込みと、デバイスサイズに基づく自動画像リサイズにより、画像のパフォーマンスを最適化します。
Link：ネイティブの<a>タグをベースにしています。Linkコンポーネントは、ページを背景で先読みし、より高速でスムーズなページ遷移を実現します。
Scripts：ネイティブの<script>タグをベースにしています。Scriptコンポーネントは、サードパーティスクリプトの読み込みと実行を制御できます。

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

Next.jsのMetadata APIを使用すると、ページの<head>要素を変更できます。メタデータは2つの方法で設定できます：

構成ベースのメタデータ：layout.jsまたはpage.jsファイルで、静的なmetadataオブジェクトまたは動的なgenerateMetadata関数をエクスポートします。
ファイルベースのメタデータ：ルートセグメントに静的または動的に生成された特殊ファイルを追加します。

さらに、imageResponseコンストラクターを使用して、JSXとCSSで動的なオープングラフ画像を作成できます。

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

大規模なアプリケーションでは、Next.jsは人気の分析およびモニタリングツールと統合され、アプリケーションのパフォーマンスを理解するのに役立ちます。詳細はOpenTelemetry インストゥルメンテーションガイドを参照してください。