Next.jsの高度な機能
画像最適化、フォント最適化、スクリプト最適化、analytics、edge runtime、実験的機能
1標準のimgタグと比較して、next/imageを使用する主な利点は何ですか？
標準のimgタグと比較して、next/imageを使用する主な利点は何ですか？
回答
next/imageは複数のサイズとモダンなフォーマット（WebP、AVIF）を生成して画像を自動的に最適化し、デフォルトでlazy loadingを適用し、自動寸法計算によりCumulative Layout Shiftを防いでWeb Vitalsを改善します。オリジナル画像を読み込む標準のimgタグとは異なり、next/imageはviewportとデバイスのピクセル比に基づいて最適なサイズを提供します。このアプローチにより、読み込み時間と帯域幅の消費が大幅に削減されます。
2next/imageコンポーネントでpriorityプロパティをいつ使用すべきですか？
next/imageコンポーネントでpriorityプロパティをいつ使用すべきですか？
回答
priorityプロパティはlazy loadingを無効にして即座に画像をプリロードします。これはLargest Contentful Paint（LCP）に影響するabove-the-foldの画像にとって重要です。priorityがない場合、これらの重要な画像はlazy loadされ、LCPが遅延してCore Web Vitalsが低下します。priorityはページの初期ロード時に表示される1〜2枚の画像（通常はヒーロー画像やメインバナー）にのみ使用してください。
3外部ドメインから画像を提供するためのnext/image設定はどれですか？
外部ドメインから画像を提供するためのnext/image設定はどれですか？
回答
next.config.jsのremotePatternsプロパティにより、プロトコル、ホスト名、ポート、パス名を細かく制御しながら、画像を提供するために許可された外部ドメインを定義できます。このアプローチは非推奨のdomainsプロパティを置き換え、許可されたソースを正確に制限することでセキュリティを強化します。remotePatternsを設定することで、CloudinaryやAWS S3などのCDNやサードパーティサービスにホストされた画像読み込み時の400エラーを防ぎます。
next/imageのサイジングにおけるfillとresponsiveの違いは何ですか？
next/imageでローカルにインポートされた静的画像を最適化するにはどうすればよいですか？
+21 面接問題