Question 1

next-intl を使用する Next.js アプリケーションにおける middleware.ts ファイルの主な役割は何ですか？

Accepted Answer

next-intl ミドルウェアは、ユーザーのロケールを自動検出し（Accept-Language ヘッダー、Cookie、または URL 経由）、ロケールプレフィックスを含む適切な URL にリダイレクトします。各リクエストの前に実行され、コンポーネントに追加のコードなしでロケールネゴシエーションを処理します。Next.js App Router で i18n ルーティングを有効にするために必要なエントリーポイントです。

Question 2

next-intl では、最適なプロジェクト構成のために翻訳ファイルをどこに配置すべきですか？

Accepted Answer

翻訳ファイルはプロジェクトルートの messages/[locale].json に配置します（例：messages/fr.json、messages/en.json）。この規約により翻訳の検索が容易になり、next-intl が i18n 設定を通じて自動的に読み込めます。プロジェクトによっては、より良い整理のために messages/[locale]/ を名前空間ごとの別ファイルで使用することもあります。

Question 3

next-intl における useTranslations と getTranslations の主な違いは何ですか？

Accepted Answer

useTranslations は Client Components 用の同期的な React フックで、getTranslations は Server Components 用の非同期関数です。getTranslations はクライアントに JavaScript を送信せずにサーバーサイドで翻訳を取得でき、パフォーマンスを向上させます。useTranslations は use client ディレクティブが必要なインタラクティブなコンポーネントに必要です。

Next.js の国際化

next-intl を使用する Next.js アプリケーションにおける middleware.ts ファイルの主な役割は何ですか？

回答

next-intl では、最適なプロジェクト構成のために翻訳ファイルをどこに配置すべきですか？

回答

next-intl における useTranslations と getTranslations の主な違いは何ですか？

回答

next-intl でサポートされるロケールを設定するにはどうすればよいですか？

next-intl の翻訳で変数を使用するための構文は何ですか？

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

Next.js の Middleware と Auth

React テスト

Zustand State Management

React パフォーマンス最適化

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

Advanced React Patterns

Next.jsの高度な機能

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

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

React Server Components

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

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