Next.js 15 i18n : Guide Complet de l'Internationalisation 2025

Réponse Rapide

Pour ajouter l'internationalisation (i18n) à Next.js 15, utilisez next-intl avec l'App Router. Installez avec npm install next-intl, créez un dossier [locale] dans votre répertoire app, configurez le middleware pour la détection de locale, et utilisez getTranslations() dans les Server Components ou useTranslations() dans les Client Components.

Vous cherchez le plus récent ? Consultez notre Guide Next.js 15 i18n 2026 pour les derniers patterns et fonctionnalités.

---

Ce Qui a Vraiment Changé dans Next.js 15

Avec les Server Components, les traductions peuvent rester entièrement sur le serveur. Le client reçoit seulement le HTML rendu.

Choisir une Bibliothèque

next-intl est ce que j'utilise maintenant. Il a été conçu spécifiquement pour l'App Router dès le départ.

Configuration

Installation

TerminalCopy
npm install next-intl

Structure de Dossier

/messages
  /en.json
  /es.json
  /de.json
/app
  /[locale]
    /layout.tsx
    /page.tsx
/middleware.ts

Fichiers de Configuration

i18n/config.ts:

TypeScriptCopy
export const locales = ['en', 'es', 'de', 'fr', 'ja'] as const;
export type Locale = (typeof locales)[number];
export const defaultLocale: Locale = 'en';

Middleware

TypeScriptCopy
1import createMiddleware from 'next-intl/middleware';
2import { locales, defaultLocale } from './i18n/config';
3
4export default createMiddleware({
5  locales,
6  defaultLocale,
7  localePrefix: 'always'
8});
9
10export const config = {
11  matcher: ['/((?!api|_next|.*\\..*).*)']
12};

Utiliser les Traductions

Server Components

TypeScriptCopy
1import { getTranslations } from 'next-intl/server';
2
3export default async function ProductPage() {
4  const t = await getTranslations('product');
5  return <h1>{t('title')}</h1>;
6}

Client Components

TypeScriptCopy
1'use client';
2import { useTranslations } from 'next-intl';
3
4export function AddToCartButton() {
5  const t = useTranslations('product');
6  return <button>{t('addToCart')}</button>;
7}

Pluralisation avec ICU

JSONCopy
1{
2  "cart": {
3    "items": "{count, plural, =0 {Votre panier est vide} one {# article dans le panier} other {# articles dans le panier}}"
4  }
5}

Astuce : Utilisez notre Éditeur de Messages ICU gratuit pour construire et tester visuellement la syntaxe de pluralisation ICU avant de l'ajouter à vos fichiers de traduction.

Quand les Fichiers JSON Deviennent Pénibles

Avec plus de 500 clés de traduction, gérer les fichiers JSON manuellement commence à faire mal :

• Les traducteurs cassent accidentellement la syntaxe JSON
• Pas de moyen de voir ce qui manque entre les langues
• Copier-coller les nouvelles clés dans 12 fichiers

Solution rapide pour les problèmes JSON : Notre outil gratuit Comparateur de JSON vous aide à comparer les fichiers de traduction entre les langues et détecter instantanément les clés manquantes.

C'est là qu'un système de gestion de traduction aide. J'utilise IntlPull pour mes projets récents—il est conçu spécifiquement pour les workflows i18n Next.js.

TerminalCopy
1# Poussez vos chaînes source
2npx @intlpullhq/cli upload
3
4# Obtenez des traductions IA
5npx @intlpullhq/cli translate --languages es,de,fr
6
7# Récupérez tout
8npx @intlpullhq/cli download

Pourquoi IntlPull pour les projets Next.js :

• Intégration native next-intl - Fonctionne avec votre structure de dossiers existante
• Traductions alimentées par IA - Obtenez des traductions instantanées avec conscience du contexte
• Workflow compatible Git - Téléchargez les traductions directement dans votre dépôt
• Mises à jour OTA - Mettez à jour les traductions sans redéployer
• Niveau gratuit - Couvre la plupart des projets personnels et startups

Conclusion

L'App Router de Next.js 15 rend vraiment l'i18n meilleur. Les Server Components étaient la pièce manquante.

1. Configurez next-intl avec la structure de dossiers ci-dessus
2. Faites fonctionner le routage avec le middleware
3. Ajoutez les traductions de manière incrémentale
4. Quand vous dépassez les fichiers JSON, regardez un TMS comme IntlPull

Mise à jour : Pour les derniers patterns et mises à jour 2026, consultez notre Guide Next.js 15 i18n 2026.

Questions Fréquentes

Quelle est la meilleure bibliothèque i18n pour Next.js 15 ?

next-intl est la meilleure bibliothèque i18n pour Next.js 15 car elle est construite spécifiquement pour l'App Router et les Server Components.

Next.js 15 a-t-il un support i18n intégré ?

Next.js 15 fournit l'infrastructure de routage pour l'i18n mais n'inclut pas la fonctionnalité de traduction. Vous avez besoin d'une bibliothèque comme next-intl.

Comment ajouter plusieurs langues à Next.js ?

Créez un dossier [locale] dans votre répertoire app, ajoutez des fichiers JSON de traduction, configurez le middleware pour la détection de locale, et utilisez les hooks de traduction. IntlPull peut automatiser la gestion des traductions.