Next.js 面接の習得: 重要な質問 (パート 9)

Next.js 面接ガイド: 成功するための 100 の質問と回答 (無料)

Next.js インタビュー ガイド: 成功するための 100 の質問と回答 ? を使用して、Next.js をマスターする際の可能性を最大限に引き出します。開発者として始めたばかりの場合でも、スキルを次のレベルに引き上げたいと考えている経験豊富なプロフェッショナルでも、この包括的な電子書籍は、Next.js の面接に合格し、自信を持って就職できる人材になるのに役立つように設計されています。開発者。このガイドでは Next.js の幅広いトピックをカバーしており、起こり得るあらゆる質問に十分に備えることができます。この電子書籍では、サーバーサイド レンダリング (SSR)、静的サイト生成 (SSG) などの重要な概念について説明します。 ) ?、増分静的再生成 (ISR) ⏳、App Router ?️、データ フェッチ ? など。各トピックは徹底的に説明されており、実際の例と、面接で最もよく聞かれる質問に対する詳細な回答が提供されています。このガイドでは、質問に答えるだけでなく、Next.js アプリケーションの最適化、パフォーマンスの向上 ⚡、スケーラビリティの確保のためのベスト プラクティス ✅ も強調しています。 Next.js は継続的に進化するため、React 18、同時レンダリング、Suspense などの最先端の機能も深く掘り下げています。これにより、常に最新の進歩を知ることができ、面接官が求めている知識を得ることができます。このガイドの特徴は、その実践的なアプローチです。理論を説明するだけでなく、プロジェクトに直接適用できる実用的な洞察も提供します。セキュリティ ?、SEO の最適化 ?、展開の実践 ?️ についても詳細に検討され、開発ライフサイクル全体に向けた準備が整っていることを確認します。トップ テクノロジー企業での技術面接の準備をしている場合でも、より効率的な構築を求めている場合でも、スケーラブルなアプリケーションを使用する場合、このガイドは Next.js スキルを磨き、競合他社に差をつけるのに役立ちます。この本を読み終える頃には、基本的な概念から専門家レベルの課題まで、Next.js の面接の質問に自信を持って取り組むことができるようになります。Next.js 開発者として優れた知識を身につけてください。そして自信を持って次のキャリアのチャンスに踏み出しましょう！

cyroscript.gumroad.com

81. App Router のデータ取得規則とは何ですか? Pages Router との違いは何ですか?

App Router を使用した Next.js では、データの取得は古い Pages Router アプローチとは異なる新しい規則に従います。

1. App Router データの取得:
   • App Router での サーバー側のデータ取得 は、コンポーネント レベルのコードで非同期関数を使用して行われます。データの取得は、useEffect または新しい getServerSidePropslike 関数を使用してコンポーネント内で直接実行できますが、コンポーネント構造とより緊密に統合されます。
   • ページレベルのレイアウト: レイアウト自体でデータの取得を定義できるため、複数の子ページのデータを取得し、そのデータをコンポーネント間で共有することが簡単になります。
   • 並列データ取得: App Router を使用すると、(Promise の配列を返すことによって) 複数のデータ取得操作を並行して実行できるため、Pages Router の順次データ取得よりも効率的になります。
   • ストリーミングと一時停止: App Router は React Suspense とストリーミングを活用し、他のデータがフェッチされている間にページをストリーミングできるようにして、パフォーマンスを向上させます。
2. Pages Router データの取得:
   • Pages Router でのデータの取得には、getServerSideProps、getStaticProps、getInitialProps などの従来のメソッドが使用されます。これらの関数はページ レベルで呼び出され、より静的またはサーバーバインドのアプローチをとります。
   • ネストされたレイアウトなし: Pages Router では、通常、データはページごとにフェッチされ、App Router のようなレイアウト レベルのデータ フェッチや並列データ フェッチの概念はありません。
   • 同期レンダリング: データを非同期にフェッチしてページにストリーミングできる App Router とは異なり、Pages Router は従来、すべてのデータがフェッチされるのを待ってからページをレンダリングします。

要約:

• App Router では、コンポーネントおよびレイアウト レベルでの統合が強化され、より柔軟で並列化されたストリーミング データの取得が導入されています。
• Pages Router は、ページ固有の静的およびサーバー側のデータ取得メソッドに依存します。

82. Next.js における非同期コンポーネントの役割は何ですか?また、それらが App Router で役立つのはなぜですか?

Next.js と App Router では、非同期コンポーネントを使用して、データを非同期でフェッチする必要があるコンポーネントの サーバー側レンダリング (SSR) を有効にします。これらのコンポーネントは、コンポーネントをレンダリングする前にデータが必要だが、サーバーまたは外部 API から取得する必要があるシナリオに役立ちます。非同期コンポーネントを使用すると、Next.js はコンポーネントがサーバー上でレンダリングされる前に必要なデータをフェッチすることでレンダリング プロセスを最適化し、パフォーマンスと SEO を向上させることができます。

これらが App Router で役立つのはなぜですか?

• データ フェッチの改善: 非同期コンポーネントにより、並列データ フェッチが可能になります。つまり、SSR またはレイアウト中に複数のデータを並行してフェッチできるため、読み込み時間が改善されます。
• パフォーマンスの向上: データはサーバー側で取得され、レンダリング前にコンポーネントに渡されるため、クライアント側でデータがロードされるのを待つ必要がなくなり、ユーザー エクスペリエンスの高速化につながります。
• Suspense との統合: これらのコンポーネントの非同期の性質は React 18 の Suspense とうまく統合され、データがフェッチされるまでコンポーネントがレンダリングを「一時停止」できるようになり、ユーザー エクスペリエンスが向上し、アプリのスケーラビリティが向上します。

83. App Router は、新しい React 18 機能を使用してデータの取得をどのように簡素化しますか?

App Router は、React 18 機能、主に Suspense と Concurrent Rendering の導入により、データの取得を簡素化します。これらの機能により、Next.js はより効率的、柔軟、かつ合理的な方法でデータの取得を処理できるようになります。

1. データ取得の一時停止:
   • App Router は Suspense を完全にサポートしています。これにより、React コンポーネントは非同期操作 (データのフェッチなど) が完了するまで待機している間、レンダリングを一時停止できます。これにより、UI での読み込み状態と非同期操作の処理が容易になります。
   • データの取得はコンポーネント自体で非同期的に実行でき、Suspense を使用すると、データを待機しているコンポーネントの読み込み状態を管理できます。
2. 同時レンダリング:
   • React 18 の 同時レンダリング を使用すると、Next.js はバックグラウンドでコンポーネントをレンダリングし、優先度の高い更新を優先できます。これは、データの取得がレンダリングと同時に実行できることを意味し、React は重要性に基づいて最初にレンダリングするコンポーネントを決定できるため、ページの読み込みが高速化され、ユーザー エクスペリエンスが向上します。
   • App Router はこれを利用して、複数のデータ取得操作を同時に実行できるようにし、さまざまなソースからのデータを必要とする複雑なページの読み込みを容易にします。
3. ストリーミング データ:
   • App Router では、データを並行してストリーミングすることもできます。つまり、他のデータがフェッチされるのを待っている間にページの一部のレンダリングを開始できます。これにより、最初のバイトまでの時間 (TTFB) が大幅に短縮され、ユーザーはコンテンツをより速く表示できるようになります。
4. レイアウト:
   • App Router のレイアウト システムは、アプリケーションのさまざまなレベルの データ フェッチ を処理できるため、データのフェッチを個々のページではなくレイアウト レベルで実行できるため、データの管理と共有が容易になります。複数のページまたはコンポーネント。

84. 新しい使用フックとは何ですか? Next.js での非同期データ処理をどのように合理化しますか?

use フック は React 18 で導入された新機能で、App Router を使用して Next.js に統合されています。これは、コンポーネントで直接非同期データの取得を処理するために使用され、機能コンポーネントでの非同期データの取得と処理がより簡単かつ宣言的に行われます。 use フックは Concurrent React 機能の一部であり、React コンポーネントでの Promise の処理を​​簡素化するように設計されています。

Next.js での非同期データ処理をどのように合理化しますか?

• シンプルさ: useEffect と useState を使用して非同期リクエストのライフサイクルを管理する代わりに、use フックを使用すると、Promise を待つ を直接実行し、解決されたデータを使用できます。利用可能です。

  • 例:
    

    import { use } from 'react';
    
    function MyComponent() {
      const data = use(fetchData()); // fetchData is a promise
      return <div>{data}</div>;
    }
    
    

• 自動サスペンド統合: use フックは Suspense とシームレスに統合されます。つまり、コンポーネントが use フックを使用してデータを取得している場合、React はコンポーネントを自動的にサスペンドします。データが利用可能になるまで、その間は読み込み状態が表示されます。これにより、読み込み状態を手動で処理したり、追加のフックを使用したりする必要がなくなります。

• 同時レンダリングのサポート: use フックは React の同時レンダリング 機能を利用します。つまり、データのフェッチは他のレンダリング操作と並行して実行できます。これにより、アプリの効率が向上し、複雑なアプリケーションでの非同期操作の管理が容易になります。

• ボイラープレートの削減: 従来、React での非同期データの取得には、useState や useEffect などのフックを使用して、読み込み、エラー、成功の状態を手動で管理する必要がありました。 use フックは、Promise の解決をコンポーネント内で直接処理することでこれを簡素化し、ボイラープレート コードを削減し、コードベースをよりクリーンで簡潔にします。

概要:

• 非同期コンポーネント を使用すると、レンダリング前にデータを非同期にロードすることでサーバー側のフェッチと最適化が可能になり、パフォーマンスが向上します。
• React 18 の機能 (Suspense や Concurrent Rendering など) は、App Router と完全に統合されており、並列データの取得を簡素化し、より高速なレンダリングでユーザー エクスペリエンスを向上させます。
• use フック は、プロミスをフェッチしてコンポーネント内で直接使用することを容易にし、ボイラープレートを削減し、Suspense とシームレスに統合することで、非同期データの処理を合理化します。

84. App Router で検索パラメータを動的に処理するにはどうすればよいですか?

App Router では、useSearchParams フックを使用するか、サーバー側またはページ ロジックでクエリ文字列を読み取ることによって、動的検索パラメーターを処理できます。 useSearchParams フックは、コンポーネント内でクエリ パラメーターを動的に操作するために React によって提供されます。

useSearchParams の使用例:

import { use } from 'react';

function MyComponent() {
  const data = use(fetchData()); // fetchData is a promise
  return <div>{data}</div>;
}

• クエリ パラメーターを使用した動的ルーティング: クエリ パラメーターに動的にアクセスし、検索語に基づいたデータの取得やフィルターの適用などのアクションを実行できます。
• URL 操作: useSearchParams を使用してクエリ パラメーターを変更し、フィルターや検索クエリの更新など、ユーザーのページとの対話に基づいて URL を操作することもできます。

85. コード分割は App Router でどのように機能しますか?

App Router では、コード分割が自動的に処理され、アプリの JavaScript の配信が最適化されます。 Next.js は、ルートとコンポーネントに基づいて JavaScript バンドルを分割するため、現在のページに必要なコードのみが読み込まれます。

App Router におけるコード分割の主な機能:

1. ルートによる自動分割: ユーザーが特定のルートに移動すると、そのルートに必要な JavaScript のみがロードされます。これにより、初期ロード時間が短縮され、パフォーマンスが向上します。
2. サーバー側レンダリング (SSR) とクライアント側レンダリング (CSR): App Router は、サーバー上で最初のページをレンダリングし (SSR を使用している場合)、その後、必要に応じて追加のコードをロードすることで、コード分割を最適化します。クライアント側でのページまたはルート間の切り替え。
3. Suspense と Lazy Loading: App Router は React Suspense と連携してコンポーネントを遅延読み込みできます。これにより、必要に応じてアプリの一部をオンデマンドでロードできるようになり、パフォーマンスがさらに最適化されます。

コード分割によるコンポーネントの遅延読み込みの例:

import { useSearchParams } from 'next/navigation';

export default function Page() {
  const searchParams = useSearchParams();
  const searchTerm = searchParams.get('search') || '';

  return (
    <div>
      <h1 id="Search-Results-for-searchTerm">Search Results for: {searchTerm}</h1>
      {/* Render search results based on the searchTerm */}
    </div>
  );
}

これにより、コード分割が動的に実行され、コンポーネントとルートが必要な場合にのみロードされることが保証されます。

86. App Router はルート グループをどのようにサポートしますか?また、ルート グループは何に使用されますか?

App Router、ルート グループ では、ルートを整理し、レイアウト、共有コンポーネント、または ミドルウェアを追加します。

ルート グループは何に使用されますか?

• ルートを論理的にグループ化する: ルート グループを使用すると、開発者はクリーンな URL 構造を維持しながら、アプリケーション内に論理的な分割を作成できます。
• 共有レイアウトまたはコンポーネント: URL に影響を与えることなく、共有レイアウトを複数のルートに適用できます。たとえば、共通のサイドバーまたはヘッダーを共有するページのグループを、単一のレイアウトの下にグループ化できます。
• ネストされたレイアウト: ルート グループは、管理ページまたは公開ページの異なるレイアウトなど、ページ構造をより詳細に制御するためのネストされたレイアウトをサポートします。

ルート グループの例:

import dynamic from 'next/dynamic';

const DynamicComponent = dynamic(() => import('./DynamicComponent'), {
  loading: () => <p>Loading...</p>,
});

export default function Page() {
  return (
    <div>
      <h1 id="Page-with-dynamic-component">Page with dynamic component</h1>
      <dynamiccomponent></dynamiccomponent>
    </div>
  );
}

この例では:

• Dashboard/、admin/、および public/ は、ページの論理グループを表します。
• 管理者/グループの AdminLayout や public/ グループの PublicLayout など、各グループに固有のレイアウトを割り当てることができます。

ルート グループの作成方法:
ルート グループは () を使用して作成され、実際のルート パスを変更せずにアプリケーションを構造化できます。

import { use } from 'react';

function MyComponent() {
  const data = use(fetchData()); // fetchData is a promise
  return <div>{data}</div>;
}

この場合、URL パスには (admin) または (public) が含まれていませんが、ルートをさまざまなセクションに整理しておくことができます。

概要:

• 検索パラメーターの処理: useSearchParams を使用するか、サーバー側コードのクエリ文字列に直接アクセスして、App Router の検索パラメーターに動的にアクセスできます。
• コード分割: App Router は、ルート、コンポーネント、ページに基づいてコードを自動的に分割し、SSR と CSR をサポートしてパフォーマンスを向上させます。
• ルート グループ: これらは、クリーンな URL 構造を維持し、共有レイアウトをサポートし、複雑なルーティング構成を有効にしながら、ルートを論理的に整理するのに役立ちます。

87. App Router を使用して大規模な Next.js プロジェクトを編成するためのベスト プラクティスは何ですか?

App Router を使用して大規模な Next.js プロジェクトを編成する場合は、スケーラビリティ、保守性、モジュール性に重点を置くことが重要です。大規模なプロジェクトを構築および組織するためのベスト プラクティスをいくつか紹介します。

1. App Router に app/ ディレクトリを使用します

Next.js 13 と App Router では、ルーティングに従来のpages/ ディレクトリの代わりに app/ ディレクトリを使用します。これにより、大規模なプロジェクトに不可欠な、ネストされたルート、レイアウト、並列ルートなどのより高度なルーティング機能が可能になります。

• ディレクトリ構造:

  • ディレクトリとファイルには明確で一貫した命名規則を使用してください。アプリのさまざまなモジュールやセクションに個別のフォルダーを設けるなど、機能に基づいてアプリを構造化します。

  • 例:
    

    import { useSearchParams } from 'next/navigation';
    
    export default function Page() {
      const searchParams = useSearchParams();
      const searchTerm = searchParams.get('search') || '';
    
      return (
        <div>
          <h1 id="Search-Results-for-searchTerm">Search Results for: {searchTerm}</h1>
          {/* Render search results based on the searchTerm */}
        </div>
      );
    }
    
    

2.共通 UI にレイアウトを使用する

レイアウトを活用して、繰り返しを避け、アプリのさまざまなページまたはセクション間で一貫したデザインを維持します。レイアウトは、コードを繰り返すことなく、ナビゲーション バー、フッター、サイドバーなどの UI コンポーネントを共有するのに役立ちます。

• 例:
  

  import dynamic from 'next/dynamic';
  
  const DynamicComponent = dynamic(() => import('./DynamicComponent'), {
    loading: () => <p>Loading...</p>,
  });
  
  export default function Page() {
    return (
      <div>
        <h1 id="Page-with-dynamic-component">Page with dynamic component</h1>
        <dynamiccomponent></dynamiccomponent>
      </div>
    );
  }
  
  

1. 機能をモジュールに分割する (機能ベースの構造)

プロジェクトを編成するための機能ベースのアプローチにより、拡張と維持が容易になります。各機能は、必要なコンポーネント、フック、ユーティリティ関数を含む独自のディレクトリを持つことができます。

• 例:
  

  import { use } from 'react';
  
  function MyComponent() {
    const data = use(fetchData()); // fetchData is a promise
    return <div>{data}</div>;
  }
  
  

1. API ルートを整理する

API ルートを処理するには、app/api/ ディレクトリを使用します。関連する機能またはドメインに基づいて整理します。これにより、コードをモジュール化して管理しやすくなります。

• 例:
  

  import { useSearchParams } from 'next/navigation';
  
  export default function Page() {
    const searchParams = useSearchParams();
    const searchTerm = searchParams.get('search') || '';
  
    return (
      <div>
        <h1 id="Search-Results-for-searchTerm">Search Results for: {searchTerm}</h1>
        {/* Render search results based on the searchTerm */}
      </div>
    );
  }
  
  

1. 強い型付けには TypeScript を使用する

大規模なプロジェクトの場合は、コードの品質が向上し、オートコンプリートが提供され、実行時エラーが減少するため、TypeScript を強くお勧めします。プロパティ、状態、API 応答のタイプを定義して、保守性とスケーラビリティを向上させます。

• 例:
  

  import dynamic from 'next/dynamic';
  
  const DynamicComponent = dynamic(() => import('./DynamicComponent'), {
    loading: () => <p>Loading...</p>,
  });
  
  export default function Page() {
    return (
      <div>
        <h1 id="Page-with-dynamic-component">Page with dynamic component</h1>
        <dynamiccomponent></dynamiccomponent>
      </div>
    );
  }
  
  

1. API ミドルウェアの活用

共有ロジック (認証チェック、ロギング、キャッシュなど) の場合は、app/api/ ディレクトリで ミドルウェア を使用して、複数の API ルート間でロジックが重複するのを回避します。

• 例:
  

  /app/
    ├── dashboard/
    │   └── page.js
    ├── admin/
    │   └── page.js
    └── public/
        └── page.js
  
  

1. データのフェッチとキャッシュを最適化する

リアルタイムまたは動的データを必要とするページには 増分静的再生成 (ISR) または サーバー側レンダリング (SSR) を使用し、コンテンツには静的生成 (getStaticProps) を使用します。頻繁には変わりません。これをキャッシュおよびバックグラウンド再生成と組み合わせて、効率的なデータ取得を実現します。

• 例:
  

  /app/
    ├── (admin)/
    │   └── page.js  // Admin group route
    ├── (public)/
    │   └── page.js  // Public group route
  
  

1. 再利用可能なロジックにカスタム フックを使用する

データのフェッチ、フォーム処理、状態管理などの再利用可能なロジックをカスタム フックにカプセル化します。これにより、コンポーネント間での繰り返しを避けながら、クリーンで DRY コードを維持することができます。

• 例:
  

  app/
  ├── dashboard/
  │   ├── page.js        # Dashboard main page
  │   ├── settings/      # Nested route
  │   │   └── page.js
  ├── auth/              # Authentication-related pages
  │   ├── login/
  │   └── register/
  ├── user/
  │   ├── profile/
  │   └── account/
  └── layout.js          # Layout for the whole app
  
  

1. コード分割と遅延読み込みを活用する

大規模な Next.js アプリケーションの場合は、すぐには必要ないコード分割と遅延読み込みコンポーネントに 動的インポート を使用します。これにより、初期バンドル サイズが削減され、パフォーマンスが向上します。

• 例:
  

  // app/layout.js
  export default function Layout({ children }) {
    return (
      <div>
        <header></header>
        <main>{children}</main>
        <footer></footer>
      </div>
    );
  }
  
  

1. グローバル状態管理を慎重に実装する

大規模な Next.js アプリケーションでは、状態管理に React Context、Redux、または Zustand を使用することが重要になる場合があります。ただし、状態の保存場所に注意し、特にアプリの小さな部分だけが状態にアクセスする必要がある場合は、状態管理が過度に複雑になることを避けてください。

• React Context を使用した例:
  

  app/
  ├── dashboard/
  │   ├── components/
  │   ├── hooks/
  │   ├── utils/
  │   └── page.js
  ├── user/
  │   ├── components/
  │   ├── hooks/
  │   └── page.js
  
  

概要:

• ルーティングとレイアウトには app/ ディレクトリを使用します。
• 機能をモジュールに整理します。メンテナンスが容易になります。
• app/api/ ディレクトリ内の API ルートを整理しておきます。
• TypeScript を活用 して強力な型付けを実現します。
• API ルート全体での共有ロジックにはミドルウェアを使用します。
• SSR、SSG、ISR を使用してデータの取得を最適化します。
• 再利用可能なロジックにはカスタム フックを利用します。
• 動的インポートを使用してコード分割を適用します。
• React Context または状態管理ライブラリを使用して、グローバル状態を慎重に管理します。

これらのベスト プラクティスに従うと、App Router を使用して大規模な Next.js アプリケーションのクリーンでスケーラブルな高パフォーマンスのコードを維持するのに役立ちます。

88. Next.js にサインアップ/ログイン機能を実装する主な手順は何ですか?

• ユーザー資格情報の取得: 送信時にサーバー アクションを呼び出すフォームを作成します。
• サーバー上のフォームフィールドを検証します: Zod や Yup などのスキーマ検証ライブラリを使用します。
• ユーザー アカウントの作成: ユーザーをデータベースに挿入するか、認証ライブラリの API を呼び出します。
• ユーザー セッションの作成: セッション管理戦略を使用してユーザーの認証状態を管理します。

89. Next.js でセッションを管理するにはどうすればよいですか?

• ステートレス セッション: Iron-session や Jose などのライブラリを使用して、セッションを作成および管理します。
• データベース セッション: セッション データをデータベースに保存し、楽観的な認証チェックに Cookie を使用します。

90. Next.js 認証におけるミドルウェアの役割は何ですか?

• ミドルウェアは、認証ステータスに基づいてユーザーをリダイレクトするための初期チェックに使用できます。パフォーマンスの問題を防ぐために、Cookie からセッションを読み取り、データベース チェックを回避する必要があります。

以上がNext.js 面接の習得: 重要な質問 (パート 9)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。