最適化

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

組み込みコンポーネント

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

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

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

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

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

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