最適化

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

組み込みコンポーネント

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

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

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

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

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

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