Exercice - Internationalisation avec next-intl¶
Créer une application Next.js bilingue (français et anglais) de boutique en ligne :
- Configurer
next-intlavec les languesfreten, français par défaut - Créer les fichiers de traductions
messages/fr.jsonetmessages/en.jsonavec :- Le titre de la boutique
- Les libellés de navigation (Accueil, Produits, Contact)
- Les libellés du catalogue (Nom, Prix, Ajouter au panier)
- Un message de bienvenue avec variable
{nom} - Un message de quantité avec pluriel (
{quantite, plural, =0 {...} one {...} other {...}})
- Créer les pages sous
app/[locale]/:page.tsx: page d'accueil avec message de bienvenue traduitproduits/page.tsx: liste de produits avec prix formatés en devise (CAD)contact/page.tsx: formulaire de contact avec tous les libellés traduits
- Ajouter un sélecteur de langue dans le layout qui permet de basculer entre FR et EN en conservant la page courante
- Afficher sur la page des produits la date du jour formatée selon la langue active