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 の中の Head Component がページの<head>を変更するのを許可します。Head Component のドキュメンテーションで詳しく学びましょう。
Static Assets
Next.js の/publicフォルダは、画像、フォント、その他のファイルなどの静的なアセットを提供するために使用できます。また、/public内のファイルは CDN プロバイダーによってキャッシュされ、効率的に配信されることもあります。
Analytics and Monitoring
大規模なアプリケーションのために、Next.js は人気の Analytics と監視ツールと統合し、アプリケーションのパフォーマンスを理解するのに役立ちます。詳細は analytics、OpenTelemetry 、およびInstrumentation ガイドで学んでください。