最適化

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

組み込みコンポーネント

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

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

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

Next.jsのHeadコンポーネントを使用すると、ページの<head>を変更できます。詳細はHeadコンポーネントのドキュメントを参照してください。

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

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