Configurer l’internationalisation (i18n) dans l’App Router de Next.js

Prompt

Agis comme un développeur Next.js senior expérimenté dans les sites multilingues et le SEO international.

Contexte :
- Langues : {{langues}}
- Langue par défaut : {{langue_defaut}}
- Stratégie d'URL : {{strategie_url}}
- Approche : {{approche}}
- Source des textes : {{source_textes}}

Avant d'écrire du code, confirme avec moi la version de Next.js et s'il existe des routes à conserver ; si je ne le sais pas, indique ce que tu supposes.

Livrables :
1. L'arborescence avec le segment `[locale]` et l'articulation des layouts, pages et métadonnées.
2. Le fichier de middleware (ou son équivalent dans ta version) qui détecte la langue via le cookie choisi par l'utilisateur et l'en-tête Accept-Language, et redirige selon {{strategie_url}} sans boucle.
3. Le chargement des dictionnaires côté serveur, avec des clés typées pour que TypeScript signale celles qui manquent, et un repli sur la langue par défaut.
4. Un sélecteur de langue accessible qui conserve le chemin actuel et mémorise la préférence.
5. Les métadonnées SEO : `lang` sur l'élément html, URL canonique et alternatives hreflang (x-default compris) sur chaque page, et generateStaticParams pour prérendre chaque langue.
6. Le formatage des dates, nombres, devises et pluriels avec Intl ou les utilitaires de {{approche}}.
7. Une checklist avant la mise en ligne.

Contraintes :
- Ne traduis pas le vrai contenu : laisse les textes d'exemple en [À COMPLÉTER] pour chaque langue.
- Ne redirige pas les robots d'indexation selon la seule adresse IP et ne masque pas de contenu selon le pays.
- Garde les textes d'interface hors des composants, dans les dictionnaires.

Format : un bloc de code par fichier avec son chemin et une courte note sur chaque choix.

Comment l'utiliser

Exemple d'utilisation

Exemple de résultat

// src/i18n/routing.ts
import { defineRouting } from 'next-intl/routing';

export const routing = defineRouting({
  locales: ['fr', 'en', 'es'],
  defaultLocale: 'fr',
  localePrefix: 'as-needed', // /a-propos (fr), /en/..., /es/...
});

// src/middleware.ts
import createMiddleware from 'next-intl/middleware';
import { routing } from './i18n/routing';

export default createMiddleware(routing);
export const config = { matcher: ['/((?!api|_next|_vercel|.*\\..*).*)'] };

// src/i18n/request.ts
import { getRequestConfig } from 'next-intl/server';
import { hasLocale } from 'next-intl';
import { routing } from './routing';

export default getRequestConfig(async ({ requestLocale }) => {
  const requested = await requestLocale;
  const locale = hasLocale(routing.locales, requested) ? requested : routing.defaultLocale;
  return { locale, messages: (await import(`../../messages/${locale}.json`)).default };
});

Informations clés

Catégorie

Programmation et développement · Next.js

Type de résultat

Code

Niveau

Avancé

Conçu pour

ChatGPT, Claude, Gemini et Microsoft Copilot

Vérifié sur

En attente de vérification éditoriale

Variables

Langues, Langue par défaut, Stratégie d’URL, Approche et Source des textes

Langue

Français

Prix

Gratuit, sans inscription

Mis à jour

07/11/2026

Questions fréquentes