L'Ère de l'App Router
Avec l'adoption massive de l'App Router dans Next.js, la manière de gérer l'i18n a changé. Les bibliothèques classiques basées sur le contexte React ne fonctionnent pas bien avec les Server Components.
C'est là qu'intervient next-intl. C'est actuellement la meilleure solution pour l'i18n dans l'App Router en 2026.
Installation
Terminalnpm install next-intl
Structure des Dossiers
Dans l'App Router, l'internationalisation est généralement gérée via un segment dynamique à la racine : app/[locale]/layout.tsx.
app/
[locale]/
layout.tsx
page.tsx
middleware.ts
i18n.ts
Configuration du Middleware
Créez un middleware.ts pour rediriger les utilisateurs vers leur langue préférée.
TypeScript1import createMiddleware from 'next-intl/middleware'; 2 3export default createMiddleware({ 4 locales: ['en', 'fr', 'de'], 5 defaultLocale: 'en' 6}); 7 8export const config = { 9 matcher: ['/((?!api|_next|.*\\..*).*)'] 10};
Configuration du plugin i18n
Créez un fichier i18n.ts (ou src/i18n.ts) :
TypeScript1import {getRequestConfig} from 'next-intl/server'; 2 3export default getRequestConfig(async ({locale}) => ({ 4 messages: (await import(`./messages/${locale}.json`)).default 5}));
Utilisation dans les Server Components
L'avantage majeur de next-intl est qu'il fonctionne de manière asynchrone dans les Server Components.
TSX1import {useTranslations} from 'next-intl'; 2 3export default function HomePage() { 4 const t = useTranslations('Index'); 5 return <h1>{t('title')}</h1>; 6}
Attendez... useTranslations ressemble à un hook ? Oui, mais dans un Server Component, next-intl gère cela intelligemment sans avoir besoin de Context Provider global qui briserait le rendu serveur.
Utilisation dans les Client Components
Pour les composants clients ('use client'), vous devez envelopper votre application (ou une partie) dans NextIntlClientProvider.
TSX1// app/[locale]/layout.tsx 2import {NextIntlClientProvider, useMessages} from 'next-intl'; 3 4export default function LocaleLayout({children, params: {locale}}) { 5 const messages = useMessages(); 6 7 return ( 8 <html lang={locale}> 9 <body> 10 <NextIntlClientProvider locale={locale} messages={messages}> 11 {children} 12 </NextIntlClientProvider> 13 </body> 14 </html> 15 ); 16}
Gestion des Traductions
Comme pour les autres frameworks, stockez vos traductions dans des fichiers JSON. Pour automatiser la gestion, utilisez IntlPull.
Terminal# Pousser les nouveaux fichiers JSON npx @intlpullhq/cli push messages/en.json
Conclusion
next-intl offre l'expérience la plus fluide pour localiser des applications Next.js modernes. Il respecte l'architecture Server Components tout en offrant une API simple et familière.
