︙

Optimizations

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

Built-in Components

内蔵 Component は、一般的な UI 最適化の実装に伴う複雑さを抽象化します。これらの Component は次のとおりです：

画像：ネイティブの <img> 要素に基づいて構築されています。 Image Component は、 lazy loading とデバイスの size に基づいて画像のサイズを自動的に調整することで、パフォーマンスを最適化します。
Link: ネイティブな<a>タグを基盤に構築されています。 Link Component は、より迅速かつスムーズなページ遷移のために、バックグラウンドでページをプリフェッチします。
Scripts：ネイティブの<script>タグに基づいて構築されています。スクリプト Component は、サードパーティの scripts の loading と実行を制御する機能を提供します。

Metadata

Metadata は、検索エンジンがあなたのコンテンツをより理解するのに役立ち(これにより優れた SEO が得られる場合もあります)、そしてあなたのコンテンツがソーシャルメディア上にどのように表示されるかをカスタマイズするのを許可します。これにより、さまざまなプラットフォーム全体でより魅力的で一貫性のあるユーザーエクスペリエンスを創造するのに役立ちます。

Next.js の中の Metadata API はページの<head>要素を修正することを許可します。 metadata には 2 つの方法で設定できます:

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

さらに、JSX と CSS を使って imageResponse コンストラクタを使用して dynamic Open Graph 画像を作成することができます。

Static Assets

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

Analytics and Monitoring

大規模なアプリケーションのために、Next.js は人気の Analytics と監視ツールと統合し、アプリケーションのパフォーマンスを理解するのに役立ちます。詳細はOpenTelemetry およびInstrumentation ガイドで学んでください。