Next.js 面接マスター: 重要な質問 (パート 3)

この例では、next/image コンポーネントが画像を最適化および調整して、パフォーマンスと応答性を自動的に向上させます。

26. Next.js のリライトとは何ですか?また、どのように機能しますか?

Next.js では、リライト を使用して、ブラウザーに表示される URL を変更せずに、受信リクエストの宛先 URL を変更します。この機能は、よりクリーンでユーザーフレンドリーな URL を作成したり、トラフィックを外部 API にリダイレクトしたり、クライアント側とサーバー側で URL を異なる構造にしたりする場合に役立ちます。

リライトの仕組み:

• 構成: 書き換えは、書き換えルールの配列を返す非同期書き換え関数内の next.config.js ファイルで定義されます。
• 宛先 URL の変更: ユーザーには /blog/post などの URL が表示されますが、リクエストは /api/post などの内部または外部 URL に書き換えられる可能性があります。
• 非表示のリダイレクト: リダイレクトとは異なり、リライトでは元の URL がブラウザーに保持され、ユーザーにシームレスなエクスペリエンスが提供されます。

書き換えの例:

// next.config.js
module.exports = {
  async rewrites() {
    return [
      {
        source: '/blog/:slug',
        destination: '/api/post/:slug' // proxies the request to /api/post/:slug
      },
    ];
  },
};

この例では、ユーザーが /blog/awesome-post に移動すると、リクエストは実際には /api/post/awesome-post によって処理されますが、/blog/awesome-post はブラウザーに表示されたままになります。

書き換えの使用例:

• API プロキシ: URL を書き換えて、実際の API エンドポイントを公開せずに外部 API にルーティングします。
• カスタム URL 構造: ユーザーフレンドリーな URL を複雑な基礎となるルートにマッピングし、ナビゲーションを簡素化します。
• 多言語ルーティング: 表示される URL 構造を変更せずに、パスを書き換えて、さまざまな言語でコンテンツを提供します。

27. next.config.js ファイルとは何ですか?またその役割は何ですか?

next.config.js ファイルは、Next.js プロジェクトの中心的な構成ファイルです。ビルド設定、環境変数、ルーティング、その他の最適化など、Next.js アプリケーションのさまざまな設定を制御します。このファイルを使用すると、開発者は Next.js のデフォルトを変更し、プロジェクトの要件に基づいてカスタマイズできるようになります。

next.config.js の主な役割:

1. ビルドのカスタマイズ:
   • 出力ディレクトリ: ビルドと静的エクスポートの出力パスを変更できます。
   • Webpack 構成: Webpack 構成を拡張またはオーバーライドして、カスタム モジュール処理またはローダー設定を有効にします。
2. 環境変数:
   • next.config.js は、さまざまな環境 (開発環境と運用環境など) の環境変数を定義するためによく使用されます。これは、API URL、認証キー、またはその他の機密情報を構造化された方法で設定する場合に役立ちます。
3. 国際化 (i18n):
   • このファイルは、多言語 Web サイトの言語ロケール、デフォルト言語、および URL 構造をセットアップするための i18n 構成を提供します。
4. ルーティングのカスタマイズ:
   • リライト: 受信リクエストの宛先を変更するリライトを定義し、真のエンドポイントを公開せずにカスタム URL 構造または API プロキシを有効にします。
   • リダイレクト: URL リダイレクトを設定して、ユーザーをあるパスから別のパスに自動的に再ルーティングします。
   • ヘッダー: アプリケーションのセキュリティを強化するために、セキュリティ関連のヘッダー (Content-Security-Policy など) などのカスタム ヘッダーを構成します。
5. パフォーマンスの最適化:
   • React 厳密モードの有効化、画像の最適化の構成、圧縮オプションの微調整など、特定の Next.js の最適化を制御できます。
   • 静的および動的ページの最適化: next.config.js では、静的サイト生成 (SSG)、サーバー側レンダリング (SSR)、および増分静的再生成 (ISR) の構成が可能です。
6. 実験的な機能:
   • Next.js では、next.config.js を通じて有効にできる実験的な機能が導入されることがよくあります。たとえば、新しい機能を試すために、初期バージョンで concurrentFeature や App Router の実験的な構成を有効にすることができます。

next.config.js の例:

// next.config.js
module.exports = {
  async rewrites() {
    return [
      {
        source: '/blog/:slug',
        destination: '/api/post/:slug' // proxies the request to /api/post/:slug
      },
    ];
  },
};

この例では:

• reactStrictMode は、React の strict モードを有効にすることでエラー検出を改善します。
• 環境変数は、API にアクセスするために設定されます。
• 国際化は複数のロケールで構成されています。
• リライトとリダイレクトは、アプリ内での URL のルーティング方法を変更します。
• イメージ ドメインは、外部ソースからのイメージの読み込みを最適化するために指定されています。

next.config.js ファイルは Next.js アプリケーションのカスタマイズと最適化において重要な役割を果たし、開発者はアプリの動作、ビルド、デプロイ設定を広範囲に制御できます。

28. Next.js は画像の最適化をどのように処理しますか?

Next.js は、 を通じて組み込みの 画像最適化 を提供します。ユーザーのデバイスと画面サイズに基づいて画像を自動的に最適化することで、パフォーマンスと読み込み時間を改善するように設計されたコンポーネントです。この機能により、品質を犠牲にすることなく画像を迅速に読み込むことができ、ユーザー エクスペリエンスと SEO の両方が向上します。

Next.js 画像最適化の仕組み:

1. 自動サイズ変更:
   • コンポーネントはデバイスの画面サイズを検出し、適切なサイズの画像を提供します。これにより、特に小さな画面でダウンロードされるデータ量が削減されます。
2. レスポンシブおよびレイアウトのオプション:
   • fill、responsive、intrinsic などのプロパティを使用すると、さまざまな画面サイズで画像がどのように動作するかを指定できます。このコンポーネントはレスポンシブ画像をシームレスに処理するため、さまざまなデバイスに適応するレイアウトの構築が容易になります。
3. 自動フォーマット変換:
   • Next.js は、ブラウザーでサポートされている場合、WebP などの最新の形式で画像を提供します。 WebP ファイルは通常、従来の JPEG または PNG 形式よりも小さく、読み込みが速いため、ページの読み込み時間が短縮されます。
4. 遅延読み込み:
   • 画像はデフォルトで遅延ロードされます。つまり、ビューポートに表示されたときにのみロードされます。これにより、特に多くの画像を含むページの最初のページ読み込み時間が短縮されます。
5. キャッシュ:
   • Next.js は最適化された画像をキャッシュして、リクエストごとの再最適化を回避し、サーバーの負荷を軽減し、速度を向上させます。キャッシュされた画像は、サーバー上にローカルに保存されるか、構成されている場合は CDN (コンテンツ配信ネットワーク) に保存されます。
6. 外部画像のサポート:
   • Next.js では、next.config.js でドメイン オプションを構成することで、外部ドメインから画像を読み込むことができます。これは、CDN またはその他の外部ソースから画像を読み込む場合に便利です。

の主要なプロパティコンポーネント:

• src: 画像のソース。ローカル パスまたは外部 URL のいずれかです。
• 幅と高さ: 画像のサイズを定義します。Next.js がレイアウトのシフトを最適化するために静的画像に必要です。
• layout: 画像の動作を制御します。オプションには次のものが含まれます。
  • fill: 画像を拡大縮小してコンテナを満たすことができます。
  • 応答性: ビューポートの幅に基づいて拡大縮小する応答性の高い画像を提供します。
  • intrinsic: 画像の固有の寸法にサイズ変更しますが、その寸法の範囲内で応答します。
• 優先度: キー画像の読み込みに優先順位を付けることができます。これは、ヒーロー画像やスクロールせずに見えるコンテンツに役立ちます。

使用例:

// next.config.js
module.exports = {
  async rewrites() {
    return [
      {
        source: '/blog/:slug',
        destination: '/api/post/:slug' // proxies the request to /api/post/:slug
      },
    ];
  },
};

next.config.js での画像の最適化の構成:

next.config.js では、画像の最適化設定をカスタマイズできます。例:

// next.config.js
module.exports = {
  reactStrictMode: true,
  env: {
    API_URL: process.env.API_URL,
  },
  i18n: {
    locales: ['en', 'es', 'fr'],
    defaultLocale: 'en',
  },
  async rewrites() {
    return [
      {
        source: '/blog/:slug',
        destination: '/api/posts/:slug',
      },
    ];
  },
  async redirects() {
    return [
      {
        source: '/old-blog/:slug',
        destination: '/blog/:slug',
        permanent: true,
      },
    ];
  },
  images: {
    domains: ['example.com'],
  },
};

Next.js 画像最適化の利点:

• ページ読み込み時間の短縮: より小さく最適化された画像を提供することで、ページ読み込み時間が大幅に短縮されます。
• SEO と Core Web Vitals の改善: 画像の読み込み時間が短縮され、LCP (Largest Contentful Paint) などの Core Web Vitals 指標が向上し、SEO に影響を与えます。
• 自動遅延読み込み: 最初はビューポート内の画像のみが読み込まれるため、ページの読み込み時間が短縮されます。

Next.js 画像の最適化は、舞台裏で複雑なタスクを処理し、最小限の開発者の労力でパフォーマンスを向上させる強力な機能です。

29. Next.js のハイブリッド レンダリングとは何ですか?

Next.js の ハイブリッド レンダリング は、静的生成 (SSG)、サーバーサイド レンダリング (SSR) など、さまざまなレンダリング戦略を組み合わせる機能を指します。およびクライアントサイド レンダリング (CSR) - 同じアプリケーション内で。この柔軟性により、開発者は各ページまたはコンポーネントの特定の要件に基づいて最も効率的なレンダリング戦略を使用できます。

• 静的生成 (SSG): ページはビルド時に事前レンダリングされます。マーケティング ページなど、頻繁に変更されないコンテンツに最適です。
• サーバー側レンダリング (SSR): ページはリクエストごとにレンダリングされ、コンテンツが常に最新であることが保証されます。頻繁に変更されるユーザー固有のデータまたはコンテンツに役立ちます。
• クライアント側レンダリング (CSR): コンテンツは、多くの場合、事前にレンダリングする必要のないインタラクティブな機能やデータのために、クライアント側で取得およびレンダリングされます。

App Router を使用すると、Next.js は 増分静的再生成 (ISR) もサポートします。これにより、サイト全体を再構築せずに、静的に生成されたページを実行時に更新できます。このハイブリッド レンダリング セットアップは、パフォーマンスとデータの鮮度のバランスをとるための多用途なアプローチを提供します。

30. Next.js でのハイブリッド レンダリングの主な利点は何ですか?

Next.js でのハイブリッド レンダリングの主な利点は次のとおりです。

1. パフォーマンスの最適化: 動的コンテンツの少ないコンテンツに SSG を使用することで、ページの読み込みが速くなり、Core Web Vitals などのパフォーマンス指標が向上します。 SSR は、頻繁なデータ更新が必要なページ用に予約されており、サイト全体に影響を与えることなく鮮度を確保します。
2. SEO の柔軟性: SEO の恩恵を受けるページは SSG または SSR を使用できるため、検索エンジンは完全にレンダリングされた HTML をインデックスに登録できます。ハイブリッド レンダリングを使用すると、Next.js アプリケーションはページごとに SEO を最適化できます。
3. ユーザー エクスペリエンスの向上: 事前レンダリングされたページ内のインタラクティブ コンポーネントに CSR を使用すると、ページの読み込みが高速になり、ユーザーの動的なインタラクションが可能になります。
4. 効率的なリソース使用: ISR は、サイト全体ではなく特定のページのみを再生成することでサーバーの負荷を最小限に抑え、パフォーマンスを損なうことなくコンテンツを更新し続けることが容易になります。
5. スケーラビリティ: ハイブリッド レンダリングを使用すると、さまざまな種類のページのレンダリングをカスタマイズできるため、Next.js アプリケーションのスケーラビリティが高くなります。