メインコンテンツまでスキップ

最適化

Next.jsには、アプリケーションの速度とCore Web Vitalsを改善するためのさまざまなビルトインの最適化が用意されています。このガイドでは、ユーザー体験を向上させるために活用できる最適化について説明します。

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

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

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

メタデータ​

メタデータは検索エンジンがコンテンツをよりよく理解するのに役立ち（結果としてSEOが向上する可能性があります）、ソーシャルメディア上でのコンテンツの見せ方をカスタマイズできるため、さまざまなプラットフォームで一貫したエンゲージングなユーザー体験を作成するのに役立ちます。

Next.jsのMetadata APIは、ページの<head>要素を変更することを可能にします。メタデータを設定する方法は2つあります：

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

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

静的アセット​

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

分析とモニタリング​

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