Question 1

Next.js App Routerで動的ルートを作成するための構文は何ですか？

Accepted Answer

Next.js App Routerの動的ルートは、可変URLセグメントを定義するために角括弧を使用します。たとえば、[id]はURLのその位置の任意の値をキャプチャするルートを作成します。この値はページパラメータを通じてアクセスできます。この規則により、各バリエーションに個別のファイルを作成せずに、異なるコンテンツに適応する汎用ページを作成できます。

Question 2

Next.jsのLinkコンポーネントの主な役割は何ですか？

Accepted Answer

Linkコンポーネントは、Next.jsで推奨されるナビゲーション要素です。ビューポートに表示されているルートを自動的にプリフェッチし、ページの完全なリロードなしにクライアントサイドのナビゲーションを可能にします。標準のaタグとは異なり、Linkはアプリケーションの状態を維持し、ページ間のスムーズな遷移を提供することで、ユーザー体験とパフォーマンスを大幅に向上させます。

Question 3

Server Componentで動的ルートパラメータにアクセスする方法は？

Accepted Answer

Next.js App Routerでは、Server Componentsは動的URLセグメントを含むparamsオブジェクトを自動的に受け取ります。このオブジェクトはコンポーネント関数にpropとして渡されます。たとえば、[id]ルートの場合、params.idはキャプチャされた値を含みます。このアプローチにより、クライアントサイドのフックを必要とせずにパラメータアクセスが簡素化されます。

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

Next.js App Routerで動的ルートを作成するための構文は何ですか？

回答

Next.jsのLinkコンポーネントの主な役割は何ですか？

回答

Server Componentで動的ルートパラメータにアクセスする方法は？

回答

Next.jsのroute groupsの主な利点は何ですか？

useRouterとusePathnameの違いは何ですか？

その他の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 API Routes

Next.js Metadata & SEO

Next.js の Middleware と Auth

React テスト

Zustand State Management

React パフォーマンス最適化

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

Advanced React Patterns

Next.jsの高度な機能

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

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

React Server Components

Next.js の国際化

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

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