最適化

Next.jsには、アプリケーションの速度とコアウェブバイタルを向上させるための、さまざまなビルトイン最適化が備わっています。このガイドでは、ユーザーエクスペリエンスを向上させるために活用できる最適化について説明します。

ビルトインコンポーネント

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

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

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

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

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

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

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

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