最適化

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

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

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

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

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

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

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

大規模なアプリケーションの場合、Next.jsは一般的な分析および監視ツールと統合されているため、アプリケーションのパフォーマンスを理解するのに役立ちます。分析、 OpenTelemetry,およびインストルメンテーションガイドで詳細を確認してください。

これは役に立ちましたか？