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:27797parcourir
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!