Question 1

Next.js における middleware とは何ですか？

Accepted Answer

Next.js の middleware は、リクエストが処理される前に実行されるコードで、レスポンスの変更、リダイレクト、headers の追加、アクセスのブロックが可能です。最適なパフォーマンスのために Edge Runtime 上で実行されます。一般的に認証、ジオロケーション、logging に使用されます。

Question 2

App Router を使用した Next.js プロジェクトで middleware ファイルはどこに配置しますか？

Accepted Answer

middleware.ts（または .js）ファイルは、app フォルダーと同じレベルのプロジェクトルートに配置する必要があります。Next.js はこのファイルを自動的に検出し、すべてのルートに対して実行します。プロジェクトがその構造を使用している場合は、src フォルダーに配置することもできます。

Question 3

middleware が実行されるルートをどのように定義しますか？

Accepted Answer

middleware の matcher 設定を使用すると、パスパターンを通じて対象のルートを指定できます。デフォルトでは、middleware は静的ファイルを除くすべてのルートで実行されます。matcher は、対象ルートを正確に制御するために wildcards と regex をサポートしています。

Next.js の Middleware と Auth

Next.js における middleware とは何ですか？

回答

App Router を使用した Next.js プロジェクトで middleware ファイルはどこに配置しますか？

回答

middleware が実行されるルートをどのように定義しますか？

回答

認証に NextAuth.js を使用する主な利点は何ですか？

Next.js の middleware でルートを保護するにはどうしますか？

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

JavaScript の基礎

React の基礎

React Hooks

コンポーネントのライフサイクル

React Router

Contextを使った状態管理

フォームと Controlled Components

データ取得と API

React Query (TanStack Query)

Styling & CSS-in-JS

Next.jsの基礎

TypeScriptとReact

Next.js データフェッチング

Next.js Server Actions

Next.jsのルーティングとナビゲーション

Next.js API Routes

Next.js Metadata & SEO

React テスト

Zustand State Management

React パフォーマンス最適化

Error Boundaries & エラーハンドリング

Advanced React Patterns

Next.jsの高度な機能

Next.jsのデプロイメントと本番環境

アーキテクチャ & デザインパターン

React Server Components

Next.js の国際化

React セキュリティ & ベストプラクティス

次の面接に向けてReact / Next.jsをマスター