Comment rendre multilingue (i18n) une application Next.js existante après coup (Guide i18n 2026)

Ajouter l'internationalisation (i18n) à un projet Next.js dès le premier jour est relativement simple. Mais que se passe-t-il lorsque vous disposez déjà d'une application Next.js mature en production, conçue dans une seule langue, et que vous devez la rendre multilingue après coup ?

Si vous avez déjà tenté l'expérience avec des bibliothèques traditionnelles comme next-intl ou next-i18next, vous connaissez le cauchemar :

• Rechercher manuellement des chaînes de texte codées en dur dans des centaines de composants JSX/TSX.
• Créer manuellement des fichiers JSON imbriqués et inventer des clés de traduction arbitraires (pages.dashboard.header.title, etc.).
• Remplacer le texte JSX par des appels de hooks verbeux (t('...')).
• Restructurer l'intégralité du dossier app/ en app/[locale]/..., ce qui casse les routes existantes, les favoris et l'indexation des moteurs de recherche.

En 2026, vous n'avez plus besoin de réécrire votre base de code pour internationaliser votre application Next.js. Avec Intlayer, vous pouvez intégrer l'internationalisation dans une application Next.js existante en quelques minutes grâce à l'extraction automatisée, la traduction assistée par IA et un routage non intrusif.

Vous recherchez le guide technique pas-à-pas complet pour Next.js 16 App Router ? Consultez notre documentation dédiée : Traduire Next.js 16 avec Intlayer.

Table des matières

Le dilemme de l'adaptation : Pourquoi internationaliser une application existante est difficile

Lors de l'internationalisation d'une application Next.js existante, les développeurs rencontrent trois obstacles majeurs :

1. Perturbation du code : Extraire manuellement les textes vers des dictionnaires JSON nécessite de modifier presque chaque fichier de composant, générant d'énormes diffs git et des risques de régression.
2. Contrainte de routage : Les bibliothèques i18n traditionnelles vous obligent généralement à déplacer votre layout racine et vos pages dans un segment dynamique [locale] (ex. /app/[locale]/page.tsx). Pour une application existante, cela perturbe les middlewares, les chemins relatifs et les intégrations tierces.
3. Travail fastidieux de traduction : Une fois les chaînes extraites, traduire les dictionnaires en 5, 10 ou 20 langues nécessite des copier-coller sans fin ou des services de gestion de localisation coûteux.

Intlayer résout ces problèmes au niveau architectural grâce à l'extraction assistée par compilateur, aux dictionnaires déclaratifs et à un routage flexible.

Extraction automatisée du contenu (fini la recherche manuelle de textes)

Option A : L'outil CLI d'extraction (npx intlayer extract)

Vous pouvez exécuter l'outil d'extraction d'Intlayer directement sur votre code :

npx intlayer extract

Cette commande analyse vos composants React, extrait les textes visibles par l'utilisateur et génère automatiquement des fichiers de déclaration de contenu (.content.ts) directement à côté de chaque composant. Votre code reste déclaratif, lisible et entièrement typé.

Option B : Le compilateur Intlayer (Extraction à la compilation)

Avec le compilateur Intlayer activé dans votre configuration, vous continuez simplement à écrire vos composants avec du texte brut dans votre langue par défaut. Lors du build, le compilateur extrait les textes et injecte automatiquement le contenu localisé :

// Write normal React code. The compiler extracts the text automatically
export default function HomePage() {
  return (
    <section>
      <h1>Welcome to our platform</h1>
      <p>Start exploring our modern features today.</p>
    </section>
  );
}

En coulisses, Intlayer construit le dictionnaire et associe le composant à son contenu localisé, éliminant totalement l'étape de refactorisation manuelle.

Dans ce cas, il générera un fichier src/app/page.content.ts avec le contenu suivant :

import { Dictionary } from "intlayer";

const content = {
  key: "home-page",
  content: {
    welcomeToOurPlatform: t({ en: "Welcome to our platform" }),
    startExploringOurModernFeaturesToday: t({
      en: "Start exploring our modern features today.",
    }),
  },
};

export default content;

Traduction assistée par IA avec votre LLM favori

Une fois votre contenu extrait, le traduire en plusieurs langues ne devrait pas prendre des jours. Intlayer intègre une CLI de traduction IA compatible avec OpenAI, Anthropic, DeepSeek ou Mistral en utilisant vos propres clés d'API :

npx intlayer fill

import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH, Locales.GERMAN],
    defaultLocale: Locales.ENGLISH,
  },
  ai: {
    provider: "openai",
    model: "gpt-4o-mini",
    apiKey: process.env.OPENAI_API_KEY,
    applicationContext:
      "Tableau de bord SaaS pour la productivité et la collaboration d'équipe",
  },
};

export default config;

L'exécution de npx intlayer fill remplit vos déclarations .content.ts avec les traductions de vos locales configurées :

import { Dictionary } from "intlayer";

const content = {
  key: "home-page",
  content: {
    welcomeToOurPlatform: t({
      en: "Welcome to our platform",
      fr: "Bienvenue sur notre plateforme",
      es: "Bienvenido a nuestra plataforma",
      de: "Willkommen auf unserer Plattform",
    }),
    startExploringOurModernFeaturesToday: t({
      en: "Start exploring our modern features today.",
      fr: "Découvrez nos fonctionnalités modernes dès aujourd'hui.",
      es: "Comience a explorar nuestras funciones modernas hoy.",
      de: "Entdecken Sie noch heute unsere modernen Funktionen.",
    }),
  },
};

export default content;

Parce qu'Intlayer fournit un applicationContext global au LLM, les traductions générées préservent les nuances techniques, le ton de la marque et le contexte grammatical bien mieux que les outils automatisés traditionnels.

Pour vérifier qu'aucune chaîne de texte n'a été oubliée avant la mise en production :

npx intlayer test

Ajouter le routage multilingue sans casser les URLs existantes

L'une des plus grandes craintes lors de la traduction d'une application existante est de devoir repenser le routage. Intlayer offre une flexibilité totale :

• Mode paramètres d'URL / Cookies (search-params) : Conservez exactement votre structure de dossiers (/app/page.tsx, /app/dashboard/page.tsx) sans créer de dossier [locale]. Le changement de langue s'effectue par paramètre (ex. ?locale=en) ou via un cookie.
• Mode préfixe (prefix / prefix-all-locales) : Lorsque vous êtes prêt pour des URLs optimisées pour le SEO (/fr/dashboard, /en/dashboard), Intlayer gère le préfixe de manière transparente avec son proxy.

Configurez votre intégration Next.js en quelques secondes :

import type { NextConfig } from "next";
import { withIntlayer } from "next-intlayer/server";

const nextConfig: NextConfig = {/* Your existing Next.js config */};

export default withIntlayer(nextConfig);

Entourez votre layout racine avec IntlayerProvider :

import type { ReactNode } from "react";
import { IntlayerProvider } from "next-intlayer";
import { getLocale } from "next-intlayer/server";
import { getHTMLTextDir } from "intlayer";

export default async function RootLayout({
  children,
}: {
  children: ReactNode;
}) {
  const locale = await getLocale();

  return (
    <html lang={locale} dir={getHTMLTextDir(locale)}>
      <body>
        <IntlayerProvider defaultLocale={locale}>{children}</IntlayerProvider>
      </body>
    </html>
  );
}

SEO multilingue

Assurez une visibilité internationale en générant vos métadonnées localisées, balises OpenGraph et liens canoniques hreflang :

import type { Metadata } from "next";
import { getLocale } from "next-intlayer/server";
import { getIntlayer } from "intlayer";

export const generateMetadata = async (): Promise<Metadata> => {
  const locale = await getLocale();
  const content = getIntlayer("home-page-metadata", locale);

  return {
    title: content.title,
    description: content.description,
  };
};

En savoir plus : Prêt pour la mise en œuvre pas-à-pas ?

Ce guide présente une vue d'ensemble des solutions pour adapter une application Next.js existante à l'internationalisation en 2026 sans friction architecturale. Pour suivre le guide technique pas-à-pas complet, incluant la configuration du middleware, la génération statique (generateStaticParams), les sitemaps localisés et l'intégration des Server Components, rendez-vous sur notre documentation détaillée :

👉 Guide complet pour traduire Next.js 16 avec Intlayer

Foire aux questions (FAQ)