ガイド
NEXT.JS INTERVIEW Qs
Next.js開発者を採用する際の技術面接で使える質問と模範回答。App Router、Server Components、データフェッチ、Middleware、キャッシュ戦略などを網羅。
最終更新：2026年5月
App RouterとPages Routerの違いを説明してください
Pages Routerはファイルベースのルーティングで、pages/ディレクトリ内の各ファイルがルートになります。getServerSideProps/getStaticPropsなどのデータフェッチ関数が必要です。App RouterはNext.js 13で導入され、app/ディレクトリを使用し、ネストされたレイアウト、Server Componentsをデフォルト、そしてストリーミングをネイティブにサポートします。段階的な移行が可能で、両方を同じプロジェクトで共存させられます。
Server ComponentsとClient Componentsの違いは何ですか？
Server Componentsはサーバー上でレンダリングされ、JavaScriptバンドルに含まれません。データベースやファイルシステムに直接アクセスでき、初期ロードを高速化します。Client Componentsは'use client'ディレクティブが必要で、ブラウザでハイドレーションされ、useStateやuseEffectなどのブラウザAPIにアクセスできます。App RouterではデフォルトがServer Componentです。
Next.jsでのデータフェッチパターンを説明してください
App Routerでは、Server Components内でasync/awaitを直接使用してfetch()できます。revalidateオプションでISR、cache: 'no-store'でSSR、デフォルトで静的生成が可能です。Server Actionsを使うとフォーム送信などをサーバー側で処理でき、API Routeを介さずに直接データベースを更新できます。React Query/SWRはClient Componentsでのクライアントサイドフェッチに適しています。
Next.js Middlewareの用途と制限を教えてください
MiddlewareはEdge上で実行され、リクエストが完了する前に実行されます。認証チェック、A/Bテスト、地理的リダイレクト、ボット検出に使用されます。制限として、Node.js標準APIの一部が使えず、データベースへの直接接続は推奨されません。レスポンスボディの変更もできません。複雑なロジックはRoute HandlerやServer Actionsに委譲すべきです。
Next.jsの画像最適化機能を説明してください
next/imageコンポーネントは自動で画像を最適化します。WebP/AVIFへのフォーマット変換、レスポンシブサイズ生成、レイジーローディング、ぼかしプレースホルダー（placeholder="blur"）をサポートします。VercelではEdge Networkでオンデマンド最適化が行われ、自前サーバーではsharpライブラリが必要です。priority属性でLCP画像のプリロードも可能です。
Next.jsのキャッシュ戦略について説明してください
Next.jsは多層キャッシュを持ちます。Router Cacheはクライアントサイドでナビゲーションを高速化、Data Cacheはfetch()のレスポンスをキャッシュ、Full Route Cacheは静的ルートのHTML/RSCペイロードをキャッシュします。revalidatePath/revalidateTagでオンデマンド再検証が可能です。動的関数（cookies(), headers()）を使用すると自動的に動的レンダリングになり、Full Route Cacheが無効化されます。
お問い合わせ