La méthode principale de réalisation de l'internationalisation dans le routeur de l'application Next.js est de combiner la bibliothèque INTL suivante pour la gestion multicangue. Tout d'abord, configurez la prise en charge du routage i18n dans next.config.js, définissez des locales, defaultLocale et LocalDetection; 2. Après avoir installé Suivant-INTL, créez un répertoire de messages pour stocker des fichiers JSON dans chaque langue et traitez automatiquement le routage du préfixe de la langue via middleware.js à l'aide de WithI18Nrouting; 3. Vérifiez les paramètres régionaux dans App / Layout.TSX et chargez des messages de langue correspondants et fournissez un contexte de traduction à l'aide de NextIntlClientProvider; 4. Appelez le texte traduit dans le composant via Usetranslations (client) ou GetTranslations (serveur); 5. Créez un composant de commutateur de langue, utilisez UserOwing et UsePathName pour remplacer le préfixe de chemin pour réaliser la commutation de langue, qui peut être utilisé pour persister les préférences des utilisateurs par des cookies; 6. Appelez GetTranslations dans GenerateMetadata pour générer des balises de méta de référencement multilingues; 7. Pour les pages générées par statistique, utilisez des GenerateStaticParams pour générer des chemins pour chaque langue; 8. Utilisez Use UseFormatter et GetFormatter de Next-INTL pour atteindre le formatage régional tel que les dates et les nombres; 9. Il est recommandé de diviser les fichiers de traduction en fonction du module fonctionnel pour améliorer la maintenance et éviter que le fichier unique soit trop grand. Cette solution prend en charge entièrement les actions SSR, RSC et Server, et est actuellement la pratique d'internationalisation suivante et flexible la plus stable et la plus flexible.
Next.js App APP Router a introduit la prise en charge des natifs pour l'internationalisation depuis la V13, en rendant le développement de sites Web multilingues plus simples et plus structurés. Avec l'intégration de style next-intl intégré (ou l'utilisation de bibliothèques tierces telles que next-i18next ), vous pouvez facilement réaliser la commutation de langue au niveau du routage, la gestion du contenu de traduction et l'expérience régionalisée. Voici les approches de base et les meilleures pratiques pour l'internationalisation (I18N) à l'aide du routeur App.
? 1. Support de routage I18N intégré avec Next.js
Next.js prend en charge le routage multilingue basé sur les préfixes de chemin (tels que /en/about , /zh/about ). Il vous suffit de configurer le champ i18n dans next.config.js .
// next.config.js
/ ** @type {import ('next'). nextConfig} * /
const nextConfig = {
i18n: {
LOCALES: [?en?, ?zh?, ?ja?],
defaultLocale: 'en',
localDetection: true, // détecter automatiquement le langage utilisateur},
// Autres configurations ...
};
Exporter par défaut NextConfig;-
locales : Une liste des langues prises en charge. -
defaultLocale : Langue par défaut. -
localeDetection : s'il faut rediriger automatiquement l'utilisateur vers sa langue préférée (en fonction de Accept-Language ).
?? Remarque: Bien que cette configuration soit prise en charge dans le routeur de l'application, il est recommandé de combiner les bibliothèques next-intl ou routing pour obtenir un contr?le plus flexible.
? 2. Utilisez next-intl pour atteindre i18n complet (méthode recommandée)
next-intl est la solution I18N la plus populaire sous le routeur App à l'heure actuelle, et elle est bien compatible avec les composants React Server et les actions du serveur.
étape 1: Installez les dépendances
NPM Installer Next-INTL
étape 2: Créez un fichier de ressources linguistiques
Créer un répertoire messages dans le projet:
/ messages
en.json
zh.json
ja.json
Exemple: en.json
{
"Bienvenue": "Bienvenue dans notre application!",
"à propos de.Title": "à propos de nous"
} zh.json
{
"Bienvenue": "Bienvenue dans notre application!",
"à propos de.Title": "à propos de nous"
} Créez middleware.js (ou .ts ) pour lire la langue et définir le contexte de la demande:
// middleware.js
import {withi18nrouting} à partir de 'next-intl / middleware';
Exporter par défaut WithI18NROUTING ({
LOCALES: [?en?, ?zh?, ?ja?],
defaultLocale: 'en',
}); Cela traitera automatiquement le mappage de routage de /en/page et /zh/page , et prendra en charge les cookies ou les langues de jugement de priorité d'URL.
étape 4: Chargez le message dans la disposition racine
// app / Layout.tsx
import {notfound} de 'suivant / navigation';
import {nextIntlClientProvider} à partir de 'Next-Intl';
import {getMessages} à partir de 'next-intl / server';
Type props = {
Enfants: react.reactnode;
Params: {Locale: String};
};
Exporter la fonction Async Fonction par défaut RootLayout ({
enfants,
Params: {Locale},
}: Accessoires) {
// Vérifiez que les paramètres régionaux sont valides Const IsvalidLocale = [?En?, ?Zh?, ?Ja?]. Inclut (Local);
if (! IsvalidLocale) notfound ();
// Chargez le message de la langue correspondante constant messages = attendre getMessages ();
Retour (
<html lang = {Locale}>
<body>
<NextIntlClientProvider messages = {messages}>
{enfants}
</ NextIntlClientProvider>
</docy>
</html>
));
} étape 5: Utilisez la traduction dans les composants
?Utiliser le client?;
import {usetranslations} de 'next-Intl';
Exporter la fonction default Welcome () {
const t = usetranslations (?commun?);
return <h1> {t ('bienvenue')} </h1>;
} Il peut également être utilisé dans le composant de serveur:
import {getTranslations} à partir de 'next-intl / server';
Exporter la fonction asynchrone par défaut sur () {
const t = attendre getTranslations (?à propos?);
return <h1> {t ('title')} </h1>;
}
? 3. Commutation de langue dynamique (sélecteur de langue)
Créer un composant de commutateur de langue:
?Utiliser le client?;
import {userouter, usePathName} depuis 'suivant / navigation';
import {uselocale} de 'Next-Intl';
Exportation Fonction LanguagesWitcher () {
const Router = userouter ();
const pathname = usePathName ();
Const Locale = Uselocale ();
const switchto = (newlocale: string) => {
// convertir le chemin actuel de / en / pathname en / zh / pathname
router.push (pathname.replace (`/ $ {par location}`, `/ $ {newlocale}`));
};
Retour (
<div>
<Button onClick = {() => switchto ('en')}> anglais </ftont>
<Button onClick = {() => switchto ('zh')}> chinois </ftont>
<Button onClick = {() => switchto ('ja')}> japonais </ftones>
</div>
));
} ? Astuce: vous pouvez également définir les préférences de persistance via cookies().set('NEXT_LOCALE', 'zh') et les lire dans les demandes suivantes.
Utilisez la traduction dans generateMetadata :
// app / about / page.tsx
import {getTranslations} à partir de 'next-intl / server';
Exportation Fonction asynchrone GenerateMetAdata ({params}: {params: {Locale: String}}) {
const t = wait getTranslations ({Locale: params.locale, namespace: 'about'});
retour {
Titre: t ('meta.title'),
Description: t (?meta.description?),
};
}
Fonction d'exportation par défaut sur () {
return <h1> à propos de la page </h1>;
}
? 5. Conseils et précautions avancées
I18n dans les routes imbriquées : assurez-vous que chaque layout.tsx re?oit params.locale et la transmet.
Génération statique (SSG) et ISR : Utilisez generateStaticParams pour pré-générer des pages pour chaque langue.
Fonction d'exportation GénéraStaticArams () {
return ['en', 'zh', 'ja']. map ((paramètres régionaux) => ({paramètres locaux}));
} Formatage de date et de numéro : next-intl fournit useFormatter() et Server getFormatter() , prenant en charge les formats régionalisés.
const Format = useFormatter ();
format.number (1000); // Affiche les millimètres selon les paramètres régionaux
Fondamentalement, c'est tout. Le routeur de l'application NEXT.js next-intl La combinaison est actuellement le moyen le plus stable et le plus flexible d'implémenter I18N. Il prend non seulement la SSR et le RSC, mais facilite également la maintenance du contenu multilingue. Tant que la structure est claire, le maintien de centaines de champs de traduction n'est pas compliqué.
? Petites suggestions: diviser messages des fichiers par module (tels que common.json , auth.json , product.json ) pour éviter d'être trop grand dans un seul fichier.
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!