Posez votre question et obtenez un résumé du document en referencant cette page et le Provider AI de votre choix
En intégrant le serveur MCP Intlayer à votre assistant AI, vous pouvez récupérer tous les documents directement depuis ChatGPT, DeepSeek, Cursor, VSCode, etc.
Voir la documentation du serveur MCPLe contenu de cette page a été traduit à l'aide d'une IA.
Voir la dernière version du contenu original en anglaisSi vous avez une idée d’amélioration pour améliorer cette documentation, n’hésitez pas à contribuer en submitant une pull request sur GitHub.
Lien GitHub de la documentationCopier le Markdown du doc dans le presse-papiers
Next.js Internationalization (i18n) avec next-i18next et Intlayer
Les frameworks next-i18next et Intlayer sont des frameworks d'internationalisation (i18n) open-source conçus pour les applications Next.js. Ils sont largement utilisés pour gérer les traductions, la localisation et le changement de langue dans les projets logiciels.
Les deux solutions incluent trois notions principales :
Déclaration de Contenu : La méthode pour définir le contenu traduisible de votre application.
- Nommée resource dans le cas de i18next, la déclaration de contenu est un objet JSON structuré contenant des paires clé-valeur pour les traductions dans une ou plusieurs langues. Voir documentation i18next pour plus d'informations.
- Nommée content declaration file dans le cas de Intlayer, la déclaration de contenu peut être un fichier JSON, JS ou TS exportant les données structurées. Voir documentation Intlayer pour plus d'informations.
Utilitaires : Outils pour construire et interpréter des déclarations de contenu dans l'application, tels que getI18n(), useCurrentLocale(), ou useChangeLocale() pour next-i18next, et useIntlayer() ou useLocale() pour Intlayer.
Plugins et Middleware : Fonctionnalités pour gérer la redirection d'URL, l'optimisation du bundling, et plus encore, telles que next-i18next/middleware pour next-i18next ou intlayerMiddleware pour Intlayer.
Intlayer vs. i18next : Différences Clés
Pour explorer les différences entre i18next et Intlayer, consultez notre article de blog next-i18next vs. next-intl vs. Intlayer.
Comment Générer des Dictionnaires next-i18next avec Intlayer
Pourquoi Utiliser Intlayer avec next-i18next ?
Les fichiers de déclaration de contenu d'Intlayer offrent généralement une meilleure expérience développeur. Ils sont plus flexibles et maintenables grâce à deux principaux avantages :
Placement Flexible : Un fichier de déclaration de contenu Intlayer peut être placé n'importe où dans l'arborescence de fichiers de l'application, simplifiant la gestion des composants dupliqués ou supprimés sans laisser de déclarations de contenu inutilisées.
Exemples de structures de fichiers :
bashCopier le codeCopier le code dans le presse-papiers
.└── src └── components └── MyComponent ├── index.content.ts # Fichier de déclaration de contenu └── index.tsx
Traductions Centralisées : Intlayer stocke toutes les traductions dans un seul fichier, assurant qu'aucune traduction n'est manquante. Lors de l'utilisation de TypeScript, les traductions manquantes sont automatiquement détectées et signalées comme des erreurs.
Installation
Copier le code dans le presse-papiers
npm install intlayer i18next next-i18next i18next-resources-to-backend
Configurer Intlayer pour Exporter les Dictionnaires i18next
L'exportation des ressources i18next ne garantit pas une compatibilité 1:1 avec d'autres frameworks. Il est recommandé de s'en tenir à une configuration basée sur Intlayer pour minimiser les problèmes.
Pour exporter des ressources i18next, configurez Intlayer dans un fichier intlayer.config.ts. Exemples de configurations :
Copier le code dans le presse-papiers
import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = { internationalization: { locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH], defaultLocale: Locales.ENGLISH, }, content: { dictionaryOutput: ["i18next"], i18nextResourcesDir: "./i18next/resources", },};export default config;
Voici la suite et la correction des parties restantes de votre document :
Importer des Dictionnaires dans votre Configuration i18next
Pour importer les ressources générées dans votre configuration i18next, utilisez i18next-resources-to-backend. Voici des exemples :
Copier le code dans le presse-papiers
import i18next from "i18next";import resourcesToBackend from "i18next-resources-to-backend";i18next.use( resourcesToBackend( (language: string, namespace: string) => import(`../i18next/resources/${language}/${namespace}.json`) ));
Déclaration de Contenu
Exemples de fichiers de déclaration de contenu dans différents formats :
Copier le code dans le presse-papiers
import { t, type Dictionary } from "intlayer";const content = { key: "my-content", content: { myTranslatedContent: t({ en: "Hello World", es: "Hola Mundo", fr: "Bonjour le monde", }), },} satisfies Dictionary;export default content;
Construire les Ressources next-i18next
Pour construire les ressources next-i18next, exécutez la commande suivante :
Copier le code dans le presse-papiers
npx run intlayer build
Cela générera des ressources dans le répertoire ./i18next/resources. La sortie attendue :
Copier le code dans le presse-papiers
.└── i18next └── resources └── en └── my-content.json └── fr └── my-content.json └── es └── my-content.json
Remarque : Le namespace i18next correspond à la clé de déclaration d'Intlayer.
Implémenter le Plugin Next.js
Une fois configuré, implémentez le plugin Next.js pour reconstruire vos ressources i18next chaque fois que les fichiers de déclaration de contenu Intlayer sont mis à jour.
Copier le code dans le presse-papiers
import { withIntlayer } from "next-intlayer/server";/** @type {import('next').NextConfig} */const nextConfig = {};export default withIntlayer(nextConfig);
Utiliser le Contenu dans les Composants Next.js
Après avoir implémenté le plugin Next.js, vous pouvez utiliser le contenu dans vos composants :
Copier le code dans le presse-papiers
import type { FC } from "react";import { useTranslation } from "react-i18next";const IndexPage: FC = () => { const { t } = useTranslation(); return ( <div> <h1>{t("my-content.title")}</h1> <p>{t("my-content.description")}</p> </div> );};export default IndexPage;