next-intlayer : Package NPM pour internationaliser (i18n) une application Next.js

Intlayer est une suite de packages conçue spécifiquement pour les développeurs JavaScript. Il est compatible avec des frameworks comme React, Next.js et Express.js.

Le package next-intlayer vous permet d'internationaliser votre application Next.js. Il fournit des fournisseurs de contexte et des hooks pour l'internationalisation dans Next.js. De plus, il inclut le plugin Next.js pour intégrer Intlayer avec Webpack ou Turbopack, ainsi qu'un middleware pour détecter la langue préférée de l'utilisateur, gérer les cookies et gérer la redirection des URL.

Pourquoi internationaliser votre application Next.js ?

Internationaliser votre application Next.js est essentiel pour servir efficacement un public mondial. Cela permet à votre application de fournir du contenu et des messages dans la langue préférée de chaque utilisateur. Cette capacité améliore l'expérience utilisateur et élargit la portée de votre application en la rendant plus accessible et pertinente pour des personnes de différentes origines linguistiques.

Pourquoi intégrer Intlayer ?

• Gestion de contenu propulsée par JavaScript : Exploitez la flexibilité de JavaScript pour définir et gérer votre contenu de manière efficace.
• Environnement typé sécurisé : Utilisez TypeScript pour garantir que toutes vos définitions de contenu sont précises et sans erreur.
• Fichiers de contenu intégrés : Gardez vos traductions proches de leurs composants respectifs, améliorant ainsi la maintenabilité et la clarté.

Installation

Installez le package nécessaire en utilisant votre gestionnaire de paquets préféré :

npm install next-intlayer

Exemple d'utilisation

Avec Intlayer, vous pouvez déclarer votre contenu de manière structurée n'importe où dans votre base de code.

Par défaut, Intlayer recherche les fichiers avec l'extension .content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}.

Vous pouvez modifier l'extension par défaut en configurant la propriété contentDir dans le fichier de configuration.

.├── intlayer.config.ts└── src    └── components        ├── ClientComponent        │   ├── index.content.ts        │   └── index.tsx        └── ServerComponent            ├── index.content.ts            └── index.tsx

Déclarez votre contenu

next-intlayer est conçu pour fonctionner avec le package intlayer. intlayer est un package qui vous permet de déclarer votre contenu n'importe où dans votre code. Il convertit les déclarations de contenu multilingue en dictionnaires structurés qui s'intègrent parfaitement dans votre application.

Voici un exemple de déclaration de contenu :

import { t, type Dictionary } from "intlayer";const clientComponentContent = {  key: "client-component",  content: {    myTranslatedContent: t({      en: "Hello World",      es: "Hola Mundo",      fr: "Bonjour le monde",    }),    numberOfCar: enu({      "<-1": "Less than minus one car",      "-1": "Moins une voiture",      "0": "Aucune voiture",      "1": "Une voiture",      ">5": "Quelques voitures",      ">19": "Beaucoup de voitures",    }),  },} satisfies Dictionary;export default clientComponentContent;

Utiliser le contenu dans votre code

Une fois que vous avez déclaré votre contenu, vous pouvez l'utiliser dans votre code. Voici un exemple de comment utiliser le contenu dans un composant React :

"use client";import type { FC } from "react";import { useIntlayer } from "next-intlayer";export const ClientComponentExample: FC = () => {  const { myTranslatedContent } = useIntlayer("client-component"); // Créez la déclaration de contenu associée  return (    <div>      <p>{myTranslatedContent}</p>    </div>  );};

Maîtriser l'internationalisation de votre application Next.js

Intlayer offre de nombreuses fonctionnalités pour vous aider à internationaliser votre application Next.js. Voici quelques-unes des fonctionnalités clés :

• Internationalisation des composants serveur : Intlayer vous permet d'internationaliser vos composants serveur de la même manière que vos composants client. Cela signifie que vous pouvez utiliser les mêmes déclarations de contenu pour les composants client et serveur.
• Middleware pour la détection de la langue : Intlayer fournit un middleware pour détecter la langue préférée de l'utilisateur. Ce middleware est utilisé pour détecter la langue préférée de l'utilisateur et le rediriger vers l'URL appropriée comme spécifié dans la configuration.
• Internationalisation des métadonnées : Intlayer offre un moyen d'internationaliser vos métadonnées, telles que le titre de votre page, en utilisant la fonction generateMetadata fournie par Next.js. Vous pouvez utiliser la fonction getTranslation pour traduire vos métadonnées.
• Internationalisation de sitemap.xml et robots.txt : Intlayer vous permet d'internationaliser vos fichiers sitemap.xml et robots.txt. Vous pouvez utiliser la fonction getMultilingualUrls pour générer des URLs multilingues pour votre sitemap.
• Internationalisation des URLs : Intlayer vous permet d'internationaliser vos URLs en utilisant la fonction getMultilingualUrls. Cette fonction génère des URLs multilingues pour votre sitemap.

Pour en savoir plus sur ces fonctionnalités, consultez le guide Internationalisation (i18n) avec Intlayer et Next.js 15 App Router.

Fonctions fournies par le package next-intlayer

Le package next-intlayer fournit également quelques fonctions pour vous aider à internationaliser votre application.

• t()
• useIntlayer()
• useDictionary()
• useLocale()

Historique de la documentation

• 5.5.10 - 2025-06-29 : Historique initial