# Next.jsの高度な機能 (React / Next.js)

> 画像最適化、フォント最適化、スクリプト最適化、analytics、edge runtime、実験的機能

- 24 面接問題
- Senior
- [面接問題: React / Next.js](https://sharpskill.dev/ja/technologies/react-next/interview-questions.md)

## 1. 標準のimgタグと比較して、next/imageを使用する主な利点は何ですか？

**回答**

next/imageは複数のサイズとモダンなフォーマット（WebP、AVIF）を生成して画像を自動的に最適化し、デフォルトでlazy loadingを適用し、自動寸法計算によりCumulative Layout Shiftを防いでWeb Vitalsを改善します。オリジナル画像を読み込む標準のimgタグとは異なり、next/imageはviewportとデバイスのピクセル比に基づいて最適なサイズを提供します。このアプローチにより、読み込み時間と帯域幅の消費が大幅に削減されます。

## 2. 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.config.jsのremotePatternsプロパティにより、プロトコル、ホスト名、ポート、パス名を細かく制御しながら、画像を提供するために許可された外部ドメインを定義できます。このアプローチは非推奨のdomainsプロパティを置き換え、許可されたソースを正確に制限することでセキュリティを強化します。remotePatternsを設定することで、CloudinaryやAWS S3などのCDNやサードパーティサービスにホストされた画像読み込み時の400エラーを防ぎます。

## さらに21問利用可能

- next/imageのサイジングにおけるfillとresponsiveの違いは何ですか？
- next/imageでローカルにインポートされた静的画像を最適化するにはどうすればよいですか？

無料で登録: https://sharpskill.dev/ja/login

## その他のReact / Next.js面接トピック

- [JavaScript の基礎](https://sharpskill.dev/ja/technologies/react-next/interview-questions/javascript-essentials.md): 25問, Junior
- [React の基礎](https://sharpskill.dev/ja/technologies/react-next/interview-questions/react-fundamentals.md): 20問, Junior
- [React Hooks](https://sharpskill.dev/ja/technologies/react-next/interview-questions/react-hooks.md): 22問, Junior
- [コンポーネントのライフサイクル](https://sharpskill.dev/ja/technologies/react-next/interview-questions/component-lifecycle.md): 18問, Junior
- [React Router](https://sharpskill.dev/ja/technologies/react-next/interview-questions/react-router.md): 20問, Junior
- [Contextを使った状態管理](https://sharpskill.dev/ja/technologies/react-next/interview-questions/state-management-context.md): 18問, Junior
- [フォームと Controlled Components](https://sharpskill.dev/ja/technologies/react-next/interview-questions/forms-controlled-components.md): 20問, Mid-Level
- [データ取得と API](https://sharpskill.dev/ja/technologies/react-next/interview-questions/fetching-data-api.md): 20問, Mid-Level
- [React Query (TanStack Query)](https://sharpskill.dev/ja/technologies/react-next/interview-questions/react-query-tanstack.md): 20問, Mid-Level
- [Styling & CSS-in-JS](https://sharpskill.dev/ja/technologies/react-next/interview-questions/styling-css-in-js.md): 18問, Mid-Level
- [Next.jsの基礎](https://sharpskill.dev/ja/technologies/react-next/interview-questions/nextjs-fundamentals.md): 25問, Mid-Level
- [TypeScriptとReact](https://sharpskill.dev/ja/technologies/react-next/interview-questions/typescript-react.md): 20問, Mid-Level
- [Next.js データフェッチング](https://sharpskill.dev/ja/technologies/react-next/interview-questions/nextjs-data-fetching.md): 24問, Mid-Level
- [Next.js Server Actions](https://sharpskill.dev/ja/technologies/react-next/interview-questions/nextjs-server-actions.md): 20問, Mid-Level
- [Next.jsのルーティングとナビゲーション](https://sharpskill.dev/ja/technologies/react-next/interview-questions/nextjs-routing-navigation.md): 22問, Mid-Level
- [Next.js API Routes](https://sharpskill.dev/ja/technologies/react-next/interview-questions/nextjs-api-routes.md): 20問, Mid-Level
- [Next.js Metadata & SEO](https://sharpskill.dev/ja/technologies/react-next/interview-questions/nextjs-metadata-seo.md): 18問, Mid-Level
- [Next.js の Middleware と Auth](https://sharpskill.dev/ja/technologies/react-next/interview-questions/nextjs-middleware-auth.md): 22問, Mid-Level
- [React テスト](https://sharpskill.dev/ja/technologies/react-next/interview-questions/react-testing.md): 20問, Mid-Level
- [Zustand State Management](https://sharpskill.dev/ja/technologies/react-next/interview-questions/zustand-state-management.md): 18問, Mid-Level
- [React パフォーマンス最適化](https://sharpskill.dev/ja/technologies/react-next/interview-questions/react-performance-optimization.md): 22問, Senior
- [Error Boundaries & エラーハンドリング](https://sharpskill.dev/ja/technologies/react-next/interview-questions/react-error-boundaries.md): 18問, Senior
- [Advanced React Patterns](https://sharpskill.dev/ja/technologies/react-next/interview-questions/advanced-react-patterns.md): 20問, Senior
- [Next.jsのデプロイメントと本番環境](https://sharpskill.dev/ja/technologies/react-next/interview-questions/nextjs-deployment-production.md): 20問, Senior
- [アーキテクチャ & デザインパターン](https://sharpskill.dev/ja/technologies/react-next/interview-questions/react-architecture-patterns.md): 22問, Senior
- [React Server Components](https://sharpskill.dev/ja/technologies/react-next/interview-questions/react-server-components.md): 26問, Senior
- [Next.js の国際化](https://sharpskill.dev/ja/technologies/react-next/interview-questions/nextjs-internationalization.md): 20問, Senior
- [React セキュリティ & ベストプラクティス](https://sharpskill.dev/ja/technologies/react-next/interview-questions/react-security-best-practices.md): 22問, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/ja/technologies/react-next/interview-questions/nextjs-advanced-features