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

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

11. Next.js の静的レンダリング (SSG) とサーバー レンダリング (SSR) の違いは何ですか

Next.js では、静的レンダリング (SSG) と サーバー レンダリング (SSR) の両方がページの事前レンダリングに使用されるメソッドです。 静的レンダリング (SSG) は、ビルド時にページを生成し、静的 HTML ファイルとして提供します。これは、頻繁に変更されないコンテンツに最適です。一方、サーバー レンダリング (SSR) はリクエスト時にページをレンダリングするため、リクエストごとに更新する必要がある動的コンテンツに最適です。

アスペクト 静的レンダリング (SSG) サーバー レンダリング (SSR)

Aspect	Static Rendering (SSG)	Server Rendering (SSR)
Rendering Time	At build time	At request time
Use Case	Ideal for static content that doesn’t change often	Best for dynamic content that needs frequent updates
Performance	Very fast, as pages are pre-built and cached	Slower initial load, as pages are rendered per request
SEO	Good for SEO, as the pages are pre-rendered	Good for SEO, but response time is longer
Data Fetching	Data is fetched at build time using static methods	Data is fetched on each request via server-side functions
Content Update	Content does not update after build unless manually rebuilt	Content is always up-to-date with each request
Caching	Cached globally and served as static files	May involve limited caching, but always re-renders
Typical Use Cases	Blogs, marketing sites, documentation	Dashboards, user-specific data, live data feeds

レンダリング時間 ビルド時 リクエスト時 使用例 頻繁に変更されない静的コンテンツに最適 頻繁な更新が必要な動的コンテンツに最適 パフォーマンス ページが事前に構築されキャッシュされるため、非常に高速です ページはリクエストごとにレンダリングされるため、初期読み込みが遅くなります SEO ページは事前にレンダリングされるため、SEO に適しています SEO には優れていますが、応答時間が長くなります データの取得 データは静的メソッドを使用してビルド時にフェッチされます データはリクエストごとにサーバー側関数を介して取得されます コンテンツ更新 手動で再ビルドしない限り、ビルド後にコンテンツは更新されません コンテンツはリクエストごとに常に最新です キャッシュ グローバルにキャッシュされ、静的ファイルとして提供されます 限定的なキャッシュが必要になる場合がありますが、常に再レンダリングされます 一般的な使用例 ブログ、マーケティング サイト、ドキュメント ダッシュボード、ユーザー固有のデータ、ライブ データ フィード テーブル>

12. Next.js の App Router とは何ですか?

Next.js 13 で導入された App Router は、Next.js アプリケーションでルーティングを管理する新しい方法です。各ファイルがルートを表す以前のページ ディレクトリとは異なり、App Router はアプリ ディレクトリを使用し、デフォルトでネストされたレイアウトとサーバー コンポーネントをサポートするファイルベースのルーティング システムを活用します。これにより、ネストされたルート、より適切なコード分割、さまざまなルート レベルでのレイアウトなど、より高度な機能が可能になります。

13. レイアウトは App Router でどのように機能しますか?

アプリ ディレクトリでは、任意のレベルでlayout.jsファイルを使用してレイアウトが定義されます。これらのファイルは、そのディレクトリ内のすべてのネストされたルートのルート レイアウトとして機能し、開発者がさまざまなレベルでレイアウトを設定できるようにします。これにより、ページ遷移全体にわたって維持され、コンポーネントの再利用が簡単になります。たとえば、/app/dashboard/layout.js のレイアウトは、/app/dashboard ディレクトリ内のすべてのページに適用されます。

14. アプリディレクトリとページディレクトリの違いは何ですか?

Next.js 13 で導入されたアプリ ディレクトリは、App Router をサポートし、デフォルトのサーバー コンポーネント、ネストされたレイアウト、より優れたデータ フェッチ戦略などの機能を提供します。以前の Next.js バージョンで使用されていたページ ディレクトリは、ネストされたレイアウトのない、より単純なファイルベースのルーティング構造に従い、デフォルトでクライアント コンポーネントを必要とします。 Next.js では両方のディレクトリを共存させることができますが、アプリ ディレクトリの方が複雑なアプリをより柔軟に効率的に構築できます

15. Next.js のサーバー コンポーネントとクライアント コンポーネントとは何ですか?

Next.js では、コンポーネントは サーバー コンポーネント と クライアント コンポーネント に分類され、それぞれがアプリケーションのアーキテクチャ内で特定の目的を果たします。サーバー コンポーネントはサーバー上でレンダリングすることでパフォーマンスが最適化され、クライアントに送信する必要がある JavaScript の量が最小限に抑えられます。これらは、ユーザーの操作を必要としない静的コンテンツやデータ取得のシナリオに最適です。一方、クライアント コンポーネントは対話性を可能にし、クライアント側でレンダリングされます。これらは、ブラウザベースのイベントとユーザー入力を処理するために不可欠です。

サーバー コンポーネントとクライアント コンポーネントの比較は次のとおりです:

Feature	Server Components	Client Components
Rendering	Rendered on the server, minimizing the JavaScript sent to the client	Rendered on the client, required for handling interactivity and browser events
Performance	Optimized for performance, reducing client-side JavaScript and improving load times	Generally adds more JavaScript to the client bundle, affecting load times
Data Fetching	Can directly fetch data on the server, which reduces client-side API calls and bundle size	Requires client-side data fetching, typically using libraries like useEffect or SWR
Interactivity	Non-interactive by default, suitable for static data and UI elements that don’t require user interaction	Supports interactive elements, such as forms, buttons, and any components requiring user input
Usage	Default component type in the app directory, suitable for components not needing client interaction	Defined by adding "use client" at the top of a component file, enabling client-side interaction
Primary Benefits	Reduces JavaScript bundle size, improves SEO, and enhances performance for static content	Adds interactivity, handles user events, and is essential for dynamic, user-driven actions
Example Use Cases	Static content display, server-side data fetching, SEO-friendly components	Forms, modals, dropdowns, and other interactive UI elements

16. Next.js は従来のクライアント側レンダリングと比較して SEO をどのように改善しますか?

Next.js は、サーバーサイド レンダリング (SSR) や 静的サイト生成 (SSG) などの機能を利用することで、従来のクライアント サイド レンダリング (CSR) と比較して SEO (検索エンジン最適化) を向上させます。 : 検索エンジンがコンテンツをより効果的にクロールし、インデックスを作成できるようにします。その方法は次のとおりです:

1. サーバーサイドレンダリング (SSR):

• サーバー上でのプリレンダリング: SSR を使用すると、Next.js はリクエストごとにサーバー上で HTML を生成します。検索エンジンがページをクロールすると、空のシェル (CSR など) ではなく、完全にレンダリングされた HTML が受信されるため、検索エンジンがコンテンツを正確にインデックスすることが容易になります。
• コンテンツ配信の高速化: HTML はすでに事前レンダリングされているため、CSR のように JavaScript の実行を待つことなく、コンテンツは検索エンジンですぐに利用可能になります。

1. 静的サイト生成 (SSG):

• ビルド時の事前レンダリング: SSG を使用すると、Next.js がビルド プロセス中に各ページの静的 HTML ファイルを生成し、ユーザーとクローラーに提供できます。これらの事前レンダリングされたページは、JavaScript の実行に依存せずに、検索エンジンによって完全にインデックス付け可能です。
• 読み込み時間の改善: 静的ページが直接提供されるため、読み込み時間が短縮されます。これは SEO ランキングにとって重要な要素です。

1. 増分静的再生 (ISR):

• オンデマンド静的再生成: Next.js の ISR 機能を使用すると、静的ページを構築してデプロイした後に更新できます。これは、サイト全体を再構築することなくコンテンツを更新できることを意味し、クローラーとユーザーが確実に新しいコンテンツを利用できるようにすることで SEO を向上させます。
• スケーラビリティ: ISR を使用すると、数百万ページの静的生成が可能になり、高速でインデックス可能なページを提供しながら、動的なコンテンツを含む大規模なサイトの維持が容易になります。

1. ページ速度の向上:

• 最適化されたアセット: Next.js は、JavaScript、CSS、画像を自動的に最適化してパフォーマンスを向上させます。読み込み時間が短縮されると、ユーザー エクスペリエンスが向上するだけでなく、検索エンジン (Google など) が読み込みの速い Web サイトを上位にランク付けするため、SEO にも直接影響します。
• 自動コード分割: Next.js は JavaScript を自動的に小さなチャンクに分割するため、ユーザーは必要なコードのみをダウンロードします。これにより、ページの初期読み込み時間が短縮され、重要なランキング要素である First Contentful Paint (FCP) や Largest Contentful Paint (LCP) などのパフォーマンス指標が向上します。

1. メタタグとオープングラフのサポート:

• 動的メタ タグ: Next.js を使用すると、タイトル、説明、ソーシャル共有データなどの動的メタ タグをページごとに簡単に設定できます。検索エンジンはこれらのタグを使用してページのコンテンツを理解し、検索結果に正しく表示するため、これは SEO にとって非常に重要です。
• SEO に適した URL 構造: Next.js は、検索エンジンがインデックスを作成して理解しやすい、クリーンで読みやすい URL をサポートしています。

1. 事前レンダリングされたコンテンツによるクロールの向上:

• 検索エンジンに優しい HTML: SSR または SSG を使用すると、クローラは HTML コンテンツをすぐに完全に利用できるため、ページをレンダリングするために JavaScript を実行する必要がありません。これにより、特に CSR ベースのアプリケーションで見逃される可能性がある動的コンテンツを含むページで、コンテンツが適切にインデックス付けされる可能性が向上します。
• JavaScript への依存関係の軽減: コンテンツが事前にレンダリングされるため、検索エンジンは JavaScript の実行に依存せず、コンテンツのインデックスが確実に作成されます。

1. リンクのプリフェッチ:

• next/link プリフェッチ: ユーザーがリンク上にマウスを移動すると、Next.js はリンクされたページをバックグラウンドで自動的にプリフェッチするため、クリックするとページがすぐに利用可能になります。これにより、ナビゲーションが高速化され、ユーザー エクスペリエンスが向上し、(ページの読み込み時間の短縮により) SEO に間接的に利益をもたらします。

1. 豊富なスニペットと構造化データ:

• JSON-LD: Next.js を使用すると、検索結果のリッチ スニペットに構造化データ (JSON-LD) を簡単に追加できます。 Next.js サイトは、構造化データ (レビュー、価格、記事など) を提供することで、リッチメディアで検索結果を強化し、クリックスルー率 (CTR) と SEO を向上させることができます。

1. カスタム エラー ページ:

• カスタム 404 ページ: Next.js を使用すると、ページが見つからない場合やリンク切れがある場合のユーザー エクスペリエンスを向上させるカスタム 404 ページを作成できます。これにより、直帰率 (直帰率のもう 1 つの要因) を減らすことができます。 SEO にプラスの影響を与えることができます。

17. Next.js は環境変数をどのように処理しますか?

Next.js は、.env.local (または一般変数の場合は .env) ファイルを読み取り、クライアント側とサーバー側の両方に変数を公開することで、App Router の環境変数を処理します。

• サーバー側変数: API ルートまたはサーバー コンポーネントで直接アクセスできます。これらは、app/api/route.js.
などのファイルで利用できます。
• クライアント側変数: 環境変数をクライアント側に公開するには、接頭辞として NEXT_PUBLIC_ を付ける必要があります。

例:

// .env.local
DATABASE_URL=your-database-url
NEXT_PUBLIC_API_URL=https://api.example.com

Next.js コード内:

• サーバー側: process.env.DATABASE_URL
• クライアント側: process.env.NEXT_PUBLIC_API_URL

これにより、データベース認証情報などの機密情報はサーバー側に保持され、パブリック データにはクライアント側でアクセスできるようになります。

18.Next.js で動的 API ルートを作成するにはどうすればよいですか?

App Router を備えた Next.js 13 では、フォルダー構造を定義し、ファイル名に 動的セグメント を使用することで動的 API ルートが作成されます。

• app/api ディレクトリ内に API ルート用のフォルダーを作成します。
• ファイル名の動的セグメントを定義するには、角かっこ ([param]) を使用します。

例:

// .env.local
DATABASE_URL=your-database-url
NEXT_PUBLIC_API_URL=https://api.example.com

この場合、ID は動的パラメータであり、次のように API ハンドラー内でアクセスできます。

/api/products/[id]/route.js

/api/products/1 にリクエストを行う場合、ID は 1 になります。

19. Next.js のミドルウェアとは何ですか?また、それらはどのように機能しますか?

Next.js のミドルウェアを使用すると、リクエストの変更、ユーザーのリダイレクト、カスタム ヘッダーの追加など、リクエストが完了する前にコードを実行できます。

App Router では、アプリ ディレクトリ内の middleware.js ファイルを使用してミドルウェアが定義されます。これはサーバー側とクライアント側の両方のリクエストで実行されます。

• 場所: ルートまたは特定のフォルダー (app/dashboard/middleware.js など) に middleware.js ファイルを作成できます。
• 目的: チェック (認証など) を実行したり、ユーザーをリダイレクトしたり、URL を書き換えたりできます。

例:

export async function GET(request, { params }) {
  const { id } = params;
  return new Response(`Product ID: ${id}`);
}

パス パターンを指定することで、ミドルウェアを特定のルートに適用できます。

// app/middleware.js
export function middleware(request) {
  const token = request.cookies.get('auth-token');
  if (!token) {
    return new Response('Unauthorized', { status: 401 });
  }
  return NextResponse.next();
}

20. React サーバー コンポーネントとは何ですか? Next.js でどのように使用されますか?

React Server Components (RSC) は、クライアント側で JavaScript を実行することなく、サーバー上でコンポーネントをレンダリングできるようにする React の機能です。これにより、ブラウザに送信される JavaScript の量が減り、パフォーマンスとページの読み込み時間が改善されます。

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