next intl

Internationalisation (i18n) pour Next.js

Caractéristiques

L'internationalisation (i18n) est un élément essentiel de l'expérience utilisateur, c'est pourquoi next-intl vous offre tous les éléments dont vous avez besoin pour bien comprendre les nuances linguistiques.

• Syntaxe des messages ICU : localisez vos messages avec interpolation, pluriels cardinaux et ordinaux, sélection d'étiquettes basée sur l'énumération et texte enrichi.

• Dates, heures et chiffres : appliquez un formatage approprié sans vous soucier des différences serveur/client telles que les fuseaux horaires.

• Type-safe : accélérez le développement grâce à la saisie semi-automatique des clés de message et détectez les fautes de frappe plus tôt grâce aux contrôles au moment de la compilation.

• API basée sur les hooks : découvrez une API unique qui peut être utilisée dans votre base de code pour transformer les traductions en chaînes simples ou en texte enrichi.

• Next.js natif et obsédé par les performances : routeur d'applications, composants de serveur, rendu statique : choisissez le bon outil pour le bon travail, next-intl fonctionne partout.

• Routage internationalisé : fournissez des noms de chemin uniques par langue et localisez éventuellement les noms de chemin pour l'optimisation des moteurs de recherche.

A quoi ça ressemble ?

 // UserProfile.tsximport {useTranslations} depuis 'next-intl' ;
 fonction d'exportation par défaut UserProfile({user}) {
  const t = useTranslations('Profil utilisateur');

   return (<section> <h1>{t('title', {firstName: user.firstName})}</h1> <p>{t('membership', {memberSince: user.memberSince})></p > <p>{t('followers', {count: user.numFollowers})}</p></section>
  );}

 // fr.json{
  "UserProfile": {"title": "Profil de {firstName}","membership": "Membre depuis {memberSince, date, short}","followers": "{count, plural, ↵ =0 {Aucun abonné encore} ↵ =1 {Un abonné} ↵ autre {# abonnés} ↵ }"
  }}

→ Lire la documentation

Hébergé sur Vercel