最適化
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、インストゥルメンテーションガイドを参照してください。
画像
組み込みの `next/image` コンポーネントで画像を最適化します。
フォント
組み込みの `next/font` ローダーを使用して、アプリケーションのウェブフォントを最適化します。
スクリプト
組み込みのScriptコンポーネントでサードパーティスクリプトを最適化します。
Static Assets
Next.jsは、publicディレクトリ内の画像などの静的ファイルを提供できます。その仕組みについてここで学べます。
バンドリング
アプリケーションのサーバーおよびクライアントバンドルを最適化する方法を学びます。
アナリティクス
Next.js Speed Insightsを使用してページのパフォーマンスを測定および追跡
遅延読み込み
インポートしたライブラリとReactコンポーネントを遅延読み込みして、アプリケーションの全体的な読み込みパフォーマンスを向上させます。
インストゥルメンテーション
Next.jsアプリのサーバー起動時にコードを実行するインストゥルメンテーションの使用方法を学ぶ
OpenTelemetry
Next.jsアプリケーションをOpenTelemetryでインストゥルメント(計装)する方法を学びます。
サードパーティライブラリ
`@next/third-parties` パッケージを使用して、アプリケーション内のサードパーティライブラリのパフォーマンスを最適化します。