M

MLOG

Français

Apprenez à mettre en œuvre une internationalisation (i18n) transparente dans vos applications Next.js pour atteindre une audience mondiale. Couvre le routage, la traduction de contenu et les meilleures pratiques.

Internationalisation avec Next.js : Créer des applications multilingues pour une audience mondiale

Dans le monde interconnecté d'aujourd'hui, créer des applications qui s'adressent à un public mondial n'est plus un luxe – c'est une nécessité. Next.js, un puissant framework React, fournit des fonctionnalités robustes pour la mise en œuvre de l'internationalisation (i18n), vous permettant de créer des applications multilingues qui offrent une expérience localisée aux utilisateurs du monde entier. Ce guide complet vous présentera les concepts, techniques et meilleures pratiques essentiels pour créer des applications Next.js internationalisées.

Comprendre l'internationalisation et la localisation

Avant de plonger dans les spécificités de l'i18n de Next.js, clarifions les termes clés :

Essentiellement, l'i18n prépare votre application à la localisation. En séparant les éléments dépendants de la langue du code principal, vous facilitez la localisation de l'application pour différents marchés.

Pourquoi mettre en œuvre l'internationalisation dans Next.js ?

La mise en œuvre de l'i18n dans votre application Next.js offre de nombreux avantages :

Fonctionnalités et configuration de l'i18n de Next.js

Next.js offre un support intégré pour l'i18n grâce à ses fonctionnalités de routage et de gestion de contenu. Voici une ventilation des fonctionnalités importantes :

1. Configuration de l'i18n dans next.config.js

La configuration de base pour l'i18n réside dans le fichier next.config.js. Voici un exemple :


/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    locales: ['en', 'es', 'fr'], // Un tableau des locales (codes de langue) prises en charge
    defaultLocale: 'en', // La locale par défaut à utiliser
    localeDetection: true, // Activer/désactiver la détection automatique de la locale basée sur les paramètres du navigateur (optionnel)
    //  domains: [
    //  {
    //    domain: 'example.com',
    //    defaultLocale: 'en',
    //  },
    //  {
    //    domain: 'example.es',
    //    defaultLocale: 'es',
    //  },
    //  ],
  },
}

module.exports = nextConfig;

Explication :

2. Routage avec des préfixes de locale

Next.js préfixe automatiquement les routes avec la locale. Par exemple, si vous avez une page à /about et que la locale est 'es' (espagnol), l'URL deviendra /es/about. Cela permet d'avoir différentes versions linguistiques des pages et permet aux moteurs de recherche d'indexer le contenu pour chaque locale. Le framework gère la redirection et le routage pour vous.

3. Utilisation du hook useRouter

Le hook useRouter de next/router donne accès à la locale actuelle et à d'autres informations de routage.


import { useRouter } from 'next/router';

function MyComponent() {
  const router = useRouter();
  const { locale, locales, defaultLocale } = router;

  return (
    

      
Locale actuelle : {locale}

      
Locales disponibles : {locales.join(', ')}

      
Locale par défaut : {defaultLocale}

    

  );
}

export default MyComponent;

L'objet router offre les propriétés clés suivantes :

Stratégies de traduction de contenu

Une fois que vous avez configuré votre application Next.js pour l'i18n, vous devrez mettre en œuvre des stratégies pour traduire votre contenu. Voici plusieurs approches populaires :

1. Utiliser un système de gestion de la traduction (TMS) dédié

Pour les projets à grande échelle avec de nombreuses langues, un TMS est fortement recommandé. Les options populaires incluent :

Avantages :

2. Créer des fichiers de traduction JSON

Pour les projets plus petits, l'utilisation de fichiers JSON pour stocker les traductions est une méthode simple et efficace.

Exemple de structure de répertoires :


/src
├── locales
│   ├── en.json
│   └── es.json
├── components
│   └── MyComponent.js
└── pages
    └── index.js

Exemple de en.json :


{
  "greeting": "Hello, world!",
  "welcomeMessage": "Welcome to our website."
}

Exemple de es.json :


{
  "greeting": "¡Hola, mundo!",
  "welcomeMessage": "Bienvenido a nuestro sitio web."
}

Exemple de MyComponent.js :


import { useRouter } from 'next/router';
import en from '../locales/en.json';
import es from '../locales/es.json';

function MyComponent() {
  const { locale } = useRouter();
  const t = locale === 'es' ? es : en;

  return (
    

      
{t.greeting}

      
{t.welcomeMessage}

    

  );
}

export default MyComponent;

Cette approche offre de la flexibilité et est simple pour les projets plus petits. Elle est généralement facile à mettre à jour et à maintenir.

3. Utiliser une bibliothèque de traduction

Plusieurs bibliothèques JavaScript rationalisent la traduction de contenu au sein de vos composants React.

Exemple avec next-i18next (Installation : npm install next-i18next i18next react-i18next) :

Créez un fichier de configuration i18n (par ex., i18n.js à la racine de votre projet) :


// i18n.js
import { createServerSideHelpers } from 'next-i18next'
import { i18n } from './next-i18next.config'

export function initI18next(req, res, namespaces = ['common']) {
  const helpers = createServerSideHelpers(
    req, 
    res, 
    i18n, 
    namespaces
  )

  return helpers
}

export { appWithTranslation } from 'next-i18next'
export { i18n }

Créez votre configuration Next.js pour next-i18next.


// next-i18next.config.js
const { i18n } = require('./next-i18next.config');

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'es', 'fr'],
  },
  // autre configuration
}

module.exports = nextConfig

Ajoutez la configuration et l'importation de la traduction à votre _app.js :


import { appWithTranslation } from 'next-i18next';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return ;
}

export default appWithTranslation(MyApp);

Créez un dossier et remplissez-le avec les locales pour vos traductions.


/public
└── locales
    ├── en
    │   └── common.json
    ├── es
    │   └── common.json
    └── fr
        └── common.json

Exemple en/common.json :


{
  "greeting": "Hello, world!",
  "welcomeMessage": "Welcome to our website."
}

Utilisation de la traduction dans un composant :


import { useTranslation } from 'next-i18next';

function MyComponent() {
  const { t } = useTranslation('common');

  return (
    

      
{t('greeting')}

      
{t('welcomeMessage')}

    

  );
}

export default MyComponent;

Cet exemple utilise le hook useTranslation pour récupérer les traductions en fonction de la locale actuelle.

Gestion des routes dynamiques et de la génération de sites statiques (SSG)

L'internationalisation devient plus complexe lorsqu'on traite des routes dynamiques (par ex., articles de blog, pages de produits) et la génération de sites statiques (SSG).

1. Routes dynamiques (par ex., /blog/[slug])

Pour les routes dynamiques, vous devrez générer les chemins corrects pour chaque locale au moment de la compilation en utilisant getStaticPaths. Cette fonction renvoie un tableau de chemins que Next.js doit pré-générer.


export async function getStaticPaths() {
  const paths = [];
  const locales = ['en', 'es', 'fr'];
  const posts = await fetchPosts(); // Récupérer les données des articles de blog

  posts.forEach(post => {
    locales.forEach(locale => {
      paths.push({
        params: {
          slug: post.slug,
        },
        locale,
      });
    });
  });

  return {
    paths,
    fallback: false, // ou 'blocking' si vous voulez afficher un état de chargement
  };
}

export async function getStaticProps({ params, locale }) {
  const post = await getPostBySlug(params.slug, locale);

  return {
    props: {
      post,
    },
  };
}

Explication :

2. Génération de site statique (SSG) avec getStaticProps

Dans getStaticProps, vous pouvez récupérer le contenu traduit en fonction du paramètre locale.


export async function getStaticProps({ params, locale }) {
  // Récupérer le contenu en fonction de la locale et des paramètres
  const { post } = await getPostBySlug(params.slug, locale);

  return {
    props: {
      post,
    },
  };
}

La fonction getPostBySlug doit récupérer le contenu traduit pour le slug et la locale donnés, qui pourrait être récupéré de vos fichiers de traduction, d'une base de données ou d'un CMS.

3. Rendu côté serveur (SSR) avec getServerSideProps

Pour le contenu qui doit être récupéré au moment de la requête, utilisez getServerSideProps. C'est utile si le contenu change fréquemment ou est personnalisé pour chaque utilisateur.


export async function getServerSideProps({ params, locale, req, res }) {
  // Récupérer des données en fonction de la locale et des paramètres (par ex., depuis une base de données)
  const data = await fetchData(params.slug, locale);

  return {
    props: {
      data,
    },
  };
}

Meilleures pratiques pour l'internationalisation avec Next.js

Suivre ces meilleures pratiques vous aidera à construire des applications multilingues robustes, maintenables et conviviales :

Considérations SEO pour les sites web internationalisés

L'optimisation de votre site web internationalisé pour les moteurs de recherche est essentielle pour générer du trafic organique du monde entier. Voici quelques bonnes pratiques SEO clés :

Exemple : Créer un simple blog multilingue

Créons un exemple simplifié d'un blog multilingue en utilisant Next.js. Cela fournira une illustration plus concrète de la manière d'appliquer les concepts discutés ci-dessus.

1. Configuration du projet

Créez un nouveau projet Next.js :


npx create-next-app mon-blog-multilingue
cd mon-blog-multilingue

2. Configurer i18n (next.config.js)


/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  i18n: {
    locales: ['en', 'es', 'fr'],
    defaultLocale: 'en',
  },
}

module.exports = nextConfig

3. Créer des fichiers de traduction

Créez un dossier locales à la racine du projet et ajoutez les fichiers JSON suivants :

locales/en.json :


{
  "title": "Welcome to My Blog",
  "postTitle": "My First Post",
  "postContent": "This is the content of my first blog post."
}

locales/es.json :


{
  "title": "Bienvenido a mi Blog",
  "postTitle": "Mi Primer Post",
  "postContent": "Este es el contenido de mi primer publicación de blog."
}

locales/fr.json :


{
  "title": "Bienvenue sur Mon Blog",
  "postTitle": "Mon Premier Article",
  "postContent": "Ceci est le contenu de mon premier article de blog."
}

4. Créer le composant d'article de blog (par ex., components/BlogPost.js)


import { useRouter } from 'next/router';
import en from '../locales/en.json';
import es from '../locales/es.json';
import fr from '../locales/fr.json';

function BlogPost() {
  const router = useRouter();
  const { locale } = router;

  let translations;
  switch (locale) {
    case 'es':
      translations = es;
      break;
    case 'fr':
      translations = fr;
      break;
    default:
      translations = en;
  }

  return (
    

      
{translations.postTitle}

      
{translations.postContent}

    

  );
}

export default BlogPost;

5. Créer la page d'accueil (pages/index.js)


import { useRouter } from 'next/router';
import BlogPost from '../components/BlogPost';
import en from '../locales/en.json';
import es from '../locales/es.json';
import fr from '../locales/fr.json';

function HomePage() {
  const router = useRouter();
  const { locale, locales } = router;

  let translations;
  switch (locale) {
    case 'es':
      translations = es;
      break;
    case 'fr':
      translations = fr;
      break;
    default:
      translations = en;
  }

  return (
    

      
{translations.title}

      
      

        {locales.map((l) => (
          
            {l.toUpperCase()}
          
        ))}
      

    

  );
}

export default HomePage;

Cet exemple simplifié illustre les principes fondamentaux de l'internationalisation avec Next.js. Vous pouvez étendre ce cadre de base pour inclure des fonctionnalités plus complexes, telles que des routes dynamiques et l'intégration avec des systèmes de gestion de la traduction. Envisagez d'améliorer les liens ci-dessus avec le composant Link et d'ajouter l'attribut locale approprié.

6. Lancer l'application

Lancez l'application avec :


npm run dev

Vous pouvez maintenant accéder à votre blog à http://localhost:3000 (anglais), http://localhost:3000/es (espagnol) et http://localhost:3000/fr (français). Vous devriez voir le titre et le contenu de l'article de blog traduits en fonction de la locale sélectionnée.

Conclusion

Next.js fournit un ensemble complet de fonctionnalités pour la mise en œuvre de l'internationalisation dans vos applications web. En suivant les principes et les techniques décrits dans ce guide, vous pouvez créer des applications multilingues qui offrent des expériences localisées aux utilisateurs du monde entier. N'oubliez pas de planifier votre stratégie i18n à l'avance, de choisir la bonne méthode de traduction pour vos besoins et de donner la priorité à l'expérience utilisateur. Avec une planification et une exécution minutieuses, vous pouvez créer des applications qui résonnent avec un public mondial et débloquent de nouvelles opportunités de croissance. L'apprentissage continu, le suivi des dernières versions et des meilleures pratiques garantiront que vous utilisez efficacement vos outils et technologies.

À mesure que la technologie progresse, attendez-vous à voir émerger des fonctionnalités i18n plus avancées. La capacité d'atteindre les utilisateurs à travers différentes cultures et groupes linguistiques restera une priorité clé pour les développeurs d'applications du monde entier. Par conséquent, la maîtrise des fondamentaux de l'i18n est une compétence précieuse qui augmentera votre valeur dans le paysage du développement mondial d'aujourd'hui.

Internationalisation avec Next.js : Créer des applications multilingues pour une audience mondiale | MLOG