Question 1

Quel est le rôle principal du fichier middleware.ts dans une application Next.js avec next-intl ?

Accepted Answer

Le middleware next-intl détecte automatiquement la locale de l'utilisateur (via Accept-Language header, cookies ou URL) et redirige vers l'URL appropriée avec le préfixe de locale. Il s'exécute avant chaque requête et gère la négociation de locale sans code additionnel dans les composants. C'est le point d'entrée obligatoire pour activer le routing i18n dans Next.js App Router.

Question 2

Dans next-intl, où placer les fichiers de traduction pour une structure de projet optimale ?

Accepted Answer

Les fichiers de traduction sont placés dans messages/[locale].json à la racine du projet (ex: messages/fr.json, messages/en.json). Cette convention facilite la découverte des traductions et permet à next-intl de les charger automatiquement via la configuration i18n. Certains projets utilisent aussi messages/[locale]/ avec des fichiers séparés par namespace pour une meilleure organisation.

Question 3

Quelle est la différence principale entre useTranslations et getTranslations dans next-intl ?

Accepted Answer

useTranslations est un hook React synchrone pour les Client Components, tandis que getTranslations est une fonction async pour les Server Components. getTranslations permet de récupérer les traductions côté serveur sans envoyer de JavaScript au client, ce qui améliore les performances. useTranslations est nécessaire pour les composants interactifs qui nécessitent la directive use client.

Internationalisation Next.js

Quel est le rôle principal du fichier middleware.ts dans une application Next.js avec next-intl ?

Réponse

Dans next-intl, où placer les fichiers de traduction pour une structure de projet optimale ?

Réponse

Quelle est la différence principale entre useTranslations et getTranslations dans next-intl ?

Réponse

Comment configurer les locales supportées dans next-intl ?

Quelle est la syntaxe pour utiliser des variables dans une traduction next-intl ?

Autres sujets d'entretien React / Next.js

Les bases de JavaScript

Fondamentaux React

React Hooks

Cycle de vie des composants

React Router

Gestion d'état avec Context

Formulaires & Composants contrôlés

Fetching de données & API

React Query (TanStack Query)

Styling & CSS-in-JS

Fondamentaux Next.js

TypeScript avec React

Data Fetching Next.js

Server Actions Next.js

Routing & Navigation Next.js

API Routes Next.js

Metadata & SEO Next.js

Middleware & Auth Next.js

Testing React

Zustand State Management

Optimisation Performance React

Error Boundaries & Error Handling

Advanced React Patterns

Fonctionnalités avancées Next.js

Déploiement & Production Next.js

Architecture & Design Patterns

React Server Components

Sécurité & Best Practices React

Maîtrise React / Next.js pour ton prochain entretien