L'internationalisation (i18n) est le processus de conception d'une application qui soit facilement adaptable à différentes langues et régions sans modifications techniques. Dans cet article, vous apprendrez comment configurer i18n dans une application Next.js et créer un sélecteur de langue pour basculer entre l'anglais et l'espagnol à l'aide de next-intl.

Installation

Tout d'abord, vous devez installer la bibliothèque next-intl, qui facilite la gestion de l'internationalisation dans Next.js. Exécutez la commande suivante dans votre terminal :

npm install next-intl

Structure du projet

La structure du projet sera la suivante :

├── messages
│   ├── en.json
│   └── es.json
├── next.config.mjs
└── src
    ├── i18n.ts
    ├── middleware.ts
    └── app
        └── [locale]
            ├── layout.tsx
            └── page.tsx

1. Configuration des messages de traduction

Créez un répertoire de messages à la racine de votre projet. Dans ce répertoire, ajoutez des fichiers JSON pour chaque langue que vous souhaitez prendre en charge.

messages/fr.json

{
  "greeting": "Hello Codú",
  "farewell": "Goodbye Codú"
}

messages/es.json

{
  "greeting": "Hola Codú",
  "farewell": "Adiós Codú"
}

Ces fichiers contiennent les traductions des phrases que votre application utilisera.

2. Configuration de Next.js

Configurez Next.js pour prendre en charge l'internationalisation dans next.config.mjs.

suivant.config.mjs

import { getRequestConfig } from 'next-intl/server';

// List of supported languages
const locales = ['en', 'es'];

export default getRequestConfig(async ({ locale }) => {
  // Validate that the incoming `locale` parameter is valid
  if (!locales.includes(locale)) {
    return { notFound: true };
  }

  return {
    messages: (await import(`./messages/${locale}.json`)).default
  };
});

Ce fichier configure Next.js pour charger les messages de traduction corrects en fonction de la langue demandée.

3. Middleware d’internationalisation

Créez un middleware pour gérer la redirection et définir la langue par défaut.

src/middleware.ts

import createMiddleware from 'next-intl/middleware';

export default createMiddleware({
  // List of all supported languages
  locales: ['en', 'es'],

  // Default language
  defaultLocale: 'en'
});

export const config = {
  // Only match internationalised pathnames
  matcher: ['/', '/(en|es)/:path*']
};

Ce middleware gère la redirection vers la langue par défaut si aucune n'est spécifiée.

4. Configuration de l'internationalisation

Créez un fichier de configuration pour gérer les paramètres d'internationalisation.

src/i18n.ts

import { notFound } from 'next/navigation';
import { getRequestConfig } from 'next-intl/server';

const locales = ['en', 'es'];

export default getRequestConfig(async ({ locale }) => {
  if (!locales.includes(locale as any)) notFound();

  return {
    messages: (await import(`../messages/${locale}.json`)).default
  };
});

Ce fichier valide les locales et charge les messages correspondants.

5. Configuration de la mise en page et de la page

Configurez la mise en page et la page principale pour prendre en charge l'internationalisation.

src/app/[locale]/layout.tsx

import { useLocale } from 'next-intl';
import { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  const locale = useLocale();
  return (
    
      {children}
    
  );
}

src/app/[locale]/page.tsx

import { useTranslations } from 'next-intl';

export default function Page() {
  const t = useTranslations();
  return (
    

      
{t('greeting')}
      
{t('farewell')}
    
  );
}

Ces fichiers configurent la mise en page et la page principale pour utiliser les traductions.

6. Création du sélecteur de langue

Enfin, créez un sélecteur de langue pour basculer entre l'anglais et l'espagnol.

src/app/[locale]/switcher.tsx

'use client';

import { useLocale } from 'next-intl';
import { useRouter } from 'next/navigation';
import { ChangeEvent, useTransition } from 'react';

export default function LocalSwitcher() {
  const [isPending, startTransition] = useTransition();
  const router = useRouter();
  const localActive = useLocale();

  const onSelectChange = (e: ChangeEvent) => {
    const nextLocale = e.target.value;
    startTransition(() => {
      router.replace(`/${nextLocale}`);
    });
  };

  return (
    
      
Change language
      EnglishSpanish
  );
}

Ce composant permet aux utilisateurs de changer la langue de l'interface.

Conclusion

Grâce à ces étapes, vous avez réussi à configurer l'internationalisation dans votre application Next.js et à créer un sélecteur de langue pour basculer entre l'anglais et l'espagnol. Cela permettra à votre application de prendre en charge plusieurs langues et de fournir une expérience utilisateur localisée.