Maison > Article > interface Web > Guide d'internationalisation (i) dans Next.js avec routage

Guide d'internationalisation (i) dans Next.js avec routage

WBOYoriginal: 2024-07-17 16:13:27862parcourir

Guide to Internationalisation (i) in Next.js with Routing

L'internationalisation (i18n) est le processus de conception d'une application pour qu'elle 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 (
    <html lang={locale}>
      <body>{children}</body>
    </html>
  );
}

src/app/[locale]/page.tsx

import { useTranslations } from 'next-intl';

export default function Page() {
  const t = useTranslations();
  return (
    <div>
      <h1>{t('greeting')}</h1>
      <p>{t('farewell')}</p>
    </div>
  );
}

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<HTMLSelectElement>) => {
    const nextLocale = e.target.value;
    startTransition(() => {
      router.replace(`/${nextLocale}`);
    });
  };

  return (
    <label className='border-2 rounded'>
      <p className='sr-only'>Change language</p>
      <select
        defaultValue={localActive}
        className='bg-transparent py-2'
        onChange={onSelectChange}
        disabled={isPending}
      >
        <option value='en'>English</option>
        <option value='es'>Spanish</option>
      </select>
    </label>
  );
}

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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

json if for Directory using Interface finally JS default this

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment créer un serveur proxy Scratch à l'aide de Node.jsArticle suivant：Comment créer un serveur proxy Scratch à l'aide de Node.js

Articles Liés

Voir plus