Guide d'internationalisation (i) dans Next.js avec routage-js tutoriel-php.cn

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

WBOY

Libérer： 2024-07-17 16:13:27

original

844 Les gens l'ont consulté

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

Copier après la connexion

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

Copier après la connexion

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ú"
}

Copier après la connexion

messages/es.json

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

Copier après la connexion

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
  };
});

Copier après la connexion

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*']
};

Copier après la connexion

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
  };
});

Copier après la connexion

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>
  );
}

Copier après la connexion

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>
  );
}

Copier après la connexion

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>
  );
}

Copier après la connexion

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!