Question 1

Next.js App Router で metadata を定義する推奨される方法は何ですか？

Accepted Answer

Next.js App Router は、layouts と pages からエクスポートされる `metadata` オブジェクトを導入し、type-safe で最適化された方法で metadata を定義します。このアプローチは Next.js 12 の `<Head>` コンポーネントを置き換え、metadata のサーバーサイドレンダリングを可能にします。`metadata` エクスポートは静的で、build time に解析され、より優れた SEO パフォーマンスを実現します。

Question 2

Next.js でルートパラメータに基づいて動的な metadata を生成するにはどうすればよいですか？

Accepted Answer

`generateMetadata` 関数は非同期で、`params` と `searchParams` を引数として受け取り、データを読み込んで metadata を動的に構築できます。サーバーサイドでレンダリング時に実行され、API コールを行うことができます。これにより、各動的ページに固有の metadata を作成でき、詳細ページの SEO に不可欠です。

Question 3

Next.js はネストされた layouts と pages 間の metadata のマージをどのように処理しますか？

Accepted Answer

Next.js は親 layouts から子 pages へ metadata を自動的にマージし、page に最も近い値が優先されます。フィールドは上書きされます（title、description）が、`openGraph.images` と `twitter.images` は配列としてマージされます。このカスケードにより、ルートレベルでデフォルトの metadata を定義し、page レベルで上書きすることができます。

Next.js Metadata & SEO

Next.js App Router で metadata を定義する推奨される方法は何ですか？

回答

Next.js でルートパラメータに基づいて動的な metadata を生成するにはどうすればよいですか？

回答

Next.js はネストされた layouts と pages 間の metadata のマージをどのように処理しますか？

回答

Next.js metadata で `title.template` を使用する利点は何ですか？

Next.js App Router で favicon を定義する推奨される方法は何ですか？

その他の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 の 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をマスター