Internationalisation améliorée (i18n) dans Next.js 14

next.js 14 simplifie le développement de sites Web multilingues. Cet article démontre la construction d'une application multilingue Next.js 14, couvrant les aspects clés de la configuration du projet à un commutateur de langage dynamique.

Caractéristiques de clé:

• Développement multilingue rationalisé avec routage du langage et chargement de messages dynamiques.
• Conseils pratiques sur l'internationalisation (I18N) dans Next.js 14, y compris la configuration du projet, la configuration i18n, la traduction basée sur JSON et le routage spécifique à la langue.
• Explication détaillée de la création de limaces linguistiques pour l'amélioration de l'organisation de contenu, en particulier bénéfique pour les blogs ou les catalogues de produits. Cela implique un chargement de messages dynamique, un middleware de correspondance des paramètres par les paramètres pour la redirection et des modifications des composants de mise en page et de page.
• Implémentation d'un commutateur de langage dynamique convivial à l'aide du routeur et des crochets de Next.js, améliorant l'expérience utilisateur.

Construire un multilingue Next.js 14 App:

Le processus implique ces étapes:

1. Configuration du projet: Créez un nouveau projet Next.js (par exemple, npx create-next-app my-i18n-app) et installez next@latest et next-intl. Configurez next.config.js avec le plugin next-intl.

2. Contenu spécifique aux paramètres régionaux: Créer un dossier content avec des fichiers JSON (par exemple, en.json, es.json, de.json) contenant des traductions pour chaque paramètre régional. Cela compense le manque actuel de traduction automatique de Next.js.

3. Chargement dynamique du message: Créez un fichier i18n.ts pour importer dynamiquement des fichiers JSON de message en fonction des paramètres régionaux détectés, en garantissant que le contenu s'adapte aux préférences du langage utilisateur. La gestion des erreurs (par exemple, notFound pour les localités non soutenues) est cruciale.

4. Routage linguistique et middleware: Implémentez un fichier middleware.ts à l'aide de next-intl/middleware pour définir des lieux pris en charge, un paramètre par défaut et des règles de routage pour diriger les utilisateurs vers la version linguistique appropriée du site. La configuration matcher garantit que seuls les chemins internationalisés sont traités.

5. Composants de mise en page et de page: Modifiez les composants de mise en page et de page (par exemple, app/layout.tsx, app/page.tsx) pour utiliser le crochet useTranslations de next-intl pour accéder au contenu traduit. Structurez vos composants pour gérer efficacement différentes versions linguistiques.

6. Composant de commutateur de langue: Créez un composant LangSwitcher.tsx qui utilise le routeur de Next.js et usePathname pour gérer la sélection et le routage des langues. Ce composant fournit une interface conviviale pour la commutation entre les langues. Intégrez ce composant dans votre disposition (par exemple, app/layout.tsx).

Les exemples de code complets pour chaque étape sont disponibles dans l'article d'origine. Cette réponse révisée fournit un aperçu plus concis et organisé, en maintenant les informations clés et le placement d'images.

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!