Comment gérer les traductions (multilingue) efficacement sur Next.js
En Belgique, le multilingue n'est pas une option. C'est une nécessité.
Votre site doit probablement exister en français. Peut-être en néerlandais. Parfois en anglais pour l'international.
Avec WordPress, le multilingue est un cauchemar. WPML est lent, cher et fragile. Polylang est limité. Les deux créent des URLs bizarres et des problèmes de SEO.
Avec Next.js, le multilingue est natif, propre et performant.
Next.js i18n Routing
Depuis ses premières versions, Next.js intègre un système de routing internationalisé (i18n) directement dans le framework.
Deux stratégies d'URL
1. Sous-chemin (/fr, /nl)
mon-site.be/fr/services
mon-site.be/nl/diensten
2. Domaine différent (mon-site.fr, mon-site.nl)
mon-site.fr/services
mon-site.nl/diensten
La stratégie sous-chemin est recommandée pour la Belgique. Elle concentre l'autorité SEO sur un seul domaine.
Configuration simple
Dans next.config.js :
module.exports = {
i18n: {
locales: ['fr', 'nl', 'en'],
defaultLocale: 'fr',
},
};
C'est tout. Next.js gère automatiquement :
- La détection de la langue du navigateur
- La redirection vers la bonne version
- Le
hreflangdans le HTML - Le routing par sous-chemin
La gestion des contenus traduits
Option 1 : Fichiers JSON (petits sites)
Pour un site vitrine, on stocke les traductions dans des fichiers JSON :
// fr/common.json
{
"hero.title": "Sites web ultra-rapides",
"hero.subtitle": "Livrés en 7 jours"
}
// nl/common.json
{
"hero.title": "Ultrasnelle websites",
"hero.subtitle": "Geleverd in 7 dagen"
}
Avec next-intl ou react-i18next, on accède aux traductions dans les composants React.
Avantages :
- Rapide à mettre en place
- Pas de dépendance externe
- Versionné avec Git
Inconvénients :
- Pas idéal pour les équipes marketing
- Difficile à faire éditer par un non-dev
Option 2 : CMS Headless multilingue (recommandé)
Pour les sites avec du contenu riche (blog, services, portfolio), on utilise un CMS Headless avec gestion multilingue native.
Sanity : chaque champ peut avoir plusieurs langues. L'éditeur bascule d'une langue à l'autre dans l'interface.
DatoCMS : même principe, avec une interface très élégante.
Contentful : gestion des locales très aboutie, idéale pour les grandes équipes.
Avantages :
- Les équipes marketing éditent directement
- Pas besoin de déployer pour changer une traduction
- Workflows de validation par langue
Le SEO multilingue
Le multilingue mal fait est un désastre SEO. Voici comment on évite les pièges.
1. Balises hreflang
Chaque page doit indiquer ses versions linguistiques alternatives :
<link rel="alternate" hreflang="fr" href="https://mon-site.be/fr/services" />
<link rel="alternate" hreflang="nl" href="https://mon-site.be/nl/diensten" />
<link rel="alternate" hreflang="x-default" href="https://mon-site.be/fr/services" />
Next.js génère ces balises automatiquement avec le routing i18n.
2. URLs traduites
| ❌ Mauvais | ✅ Bon |
|---|---|
/fr/services vs /nl/services | /fr/services vs /nl/diensten |
Les URLs doivent être traduites. C'est meilleur pour l'utilisateur ET pour Google.
3. Contenu unique par langue
Ne traduisez pas mot à mot. Adaptez :
- Les exemples locaux (Bruxelles vs Amsterdam)
- Les references culturelles
- Les CTA ("Contactez-nous" vs "Neem contact op")
Google détecte les traductions robotiques et les pénalise.
4. Sitemap multilingue
Le sitemap XML doit lister toutes les versions linguistiques de chaque page. Next.js + next-sitemap peuvent générer ça automatiquement.
5. Balise langue HTML
<html lang="fr">
Next.js définit automatiquement l'attribut lang en fonction de la locale active.
La détection de langue
Next.js peut détecter automatiquement la langue préférée du navigateur et rediriger l'utilisateur.
Mais attention : en Belgique, un visiteur à Bruxelles peut avoir son navigateur en anglais. La détection automatique n'est pas parfaite.
Bonne pratique :
- Détecter la langue, mais proposer un choix explicite
- Mémoriser le choix dans un cookie
- Permettre le changement facilement (switcher visible)
Le cas de la Belgique
En Belgique, le multilingue a des spécificités :
- Bruxelles : français majoritaire, mais néerlandais et anglais importants
- Flandre : néerlandais obligatoire
- Wallonie : français, parfois allemand
Selon votre cible :
- B2B bruxellois → fr + nl minimum
- B2C bruxellois → fr + nl + en
- International → fr + en
Chez Promto.be, on code en français par défaut et on structure le site pour accueillir d'autres langues facilement.
Le coût du multilingue
| Élément | Coût approximatif |
|---|---|
| Développement i18n | +150€ à 300€ |
| Traduction professionnelle | 0.15€ à 0.30€ / mot |
| CMS multilingue | Inclus (Sanity, DatoCMS) |
| Maintenance | Même coût que monolingue |
Une page de 500 mots traduite en néerlandais = 75€ à 150€ de traduction pro. C'est un investissement, pas une dépense.
Conclusion
Le multilingue avec Next.js est simple, propre et performant. Contrairement à WordPress où c'est un hack permanent, c'est une fonctionnalité native du framework.
Pour une entreprise belge, c'est un avantage compétitif majeur. Vous pouvez adresser l'ensemble du marché belge sans complexité technique ni dette technique.
Chez Promto.be, on intègre le multilingue dès la conception du site. Pas de rustine après coup. Une architecture pensée pour grandir.