最適化

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

組み込みコンポーネント

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

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

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

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

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

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

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

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