Pourquoi Internationalisation (i18n) avec Astro ?
L'internationalisation (i18n) est essentielle pour les développeurs web modernes car elle permet d'adapter leurs applications à une large gamme de langues et cultures sans avoir à recréer du contenu ou des fonctionnalités. En utilisant Astro, un framework basé sur React, nous pouvons facilement ajouter la i18n à nos projets.
Un cas concret de l'importance de la i18n est le développement d'une application qui sera utilisée par des personnes parlant différentes langues dans différents pays. Par exemple, une plateforme e-commerce doit être disponible en plusieurs langues pour les clients internationaux.
Prerequis
- Connaissance de base de JavaScript et React
- Installation de Node.js (version recommandée : 14.x ou plus tard)
- Un éditeur de code comme VSCode
Concepts fondamentaux
1. Langue par défaut
La langue par défaut est celle qui sera utilisée lorsque le navigateur ne trouve pas une traduction pour la langue courante.
// src/i18n.js
export const defaultLocale = 'en';
2. Traductions
Les traductions sont stockées dans des fichiers JSON, chacun correspondant à une langue spécifique.
// src/i18n/locales/en.json
{
"welcome": "Welcome to our website"
}
json
// src/i18n/locales/fr.json
{
"welcome": "Bienvenue sur notre site web"
}
3. Utilisation des traductions
Pour utiliser les traductions, nous avons besoin d'un hook personnalisé.
// src/hooks/useI18n.js
import { useLocale } from 'react-intl';
import i18nConfig from '../i18n';
export default function useI18n() {
const locale = useLocale();
const messages = require(`../i18n/locales/${locale}.json`);
return {
t(key, values) {
let message = messages[key];
if (values) {
Object.keys(values).forEach(value => {
message = message.replace(`{${value}}`, values[value]);
});
}
return message;
},
};
}
4. Configuration de React-Intl
React-Intl est une bibliothèque populaire pour la i18n en React.
npm install react-intl
5. Composant internationalisé
Maintenant, nous pouvons utiliser notre hook dans un composant.
// src/components/WelcomeMessage.jsx
import useI18n from '../hooks/useI18n';
export default function WelcomeMessage() {
const { t } = useI18n();
return (
<div>
{t('welcome')}
</div>
);
}
Mise en pratique : projet fil rouge
Étape 1 : Structure du projet
mkdir astro-i18n-app
cd astro-i18n-app
npm init -y
npm install astro react react-dom react-intl
npm install --save-dev @astrojs/react
Structure de base du projet :
astro-i18n-app/
├── src/
│ ├── components/
│ │ └── WelcomeMessage.jsx
│ ├── hooks/
│ │ └── useI18n.js
│ ├── i18n/
│ │ ├── locales/
│ │ │ ├── en.json
│ │ │ └── fr.json
│ │ └── index.js
│ ├── layouts/
│ │ └── DefaultLayout.jsx
│ ├── pages/
│ │ ├── index.astro
│ │ └── about.astro
├── package.json
└── astro.config.mjs
Étape 2 : Configuration de Astro
// astro.config.mjs
import { defineConfig } from 'astro/config';
import react from '@astrojs/react';
export default defineConfig({
integrations: [react()],
});
Étape 3 : Implémentation des traductions
// src/i18n/locales/en.json
{
"welcome": "Welcome to our website",
"about": "About Us"
}
json
// src/i18n/locales/fr.json
{
"welcome": "Bienvenue sur notre site web",
"about": "À Propos de Nous"
}
Étape 4 : Composant internationalisé
// src/components/WelcomeMessage.jsx
import useI18n from '../hooks/useI18n';
export default function WelcomeMessage() {
const { t } = useI18n();
return (
<div>
{t('welcome')}
</div>
);
}
Étape 5 : Utilisation du composant dans une page
// src/pages/index.astro
---
import WelcomeMessage from '../components/WelcomeMessage.jsx';
---
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Home</title>
</head>
<body>
<h1><WelcomeMessage /></h1>
</body>
</html>
Étape 6 : Ajout d'une page "About"
// src/pages/about.astro
---
import WelcomeMessage from '../components/WelcomeMessage.jsx';
---
<html lang="en">
<head>
<meta charset="utf-8" />
<title>About Us</title>
</head>
<body>
<h1><WelcomeMessage /></h1>
<p>{t('about')}</p>
</body>
</html>
Étape 7 : Ajout de traductions en français
// src/i18n/locales/fr.json
{
"welcome": "Bienvenue sur notre site web",
"about": "À Propos de Nous"
}
Erreurs frequentes et debugging
1. Erreur : Traduction non trouvée
// ❌ Mauvais
<p>{t('nonexistentKey')}</p>
Correction :
// ✅ Correct
const { t, messages } = useI18n();
const message = messages['nonexistentKey'] || 'Default Message';
return <p>{message}</p>;
2. Erreur : Mauvaise langue
// ❌ Mauvais
useLocale('fr');
Correction :
// ✅ Correct
import { useLocale } from 'react-intl';
const locale = useLocale();
3. Erreur : Syntaxe incorrecte dans les fichiers JSON
// ❌ Mauvais
{
"welcome": "Bienvenue sur notre site web"
}
Correction :
// ✅ Correct
{
"welcome": "Bienvenue sur notre site web"
}
Pour aller plus loin
1. Utilisation de Contexte pour la langue courante
Utiliser React's Context pour partager la langue courante à travers l'application.
2. Gestion des fichiers JSON dynamiques
Charger les fichiers JSON en fonction de la langue courante au lieu de les importer statiquement.
3. Utilisation de bibliothèques plus avancées
Explorer d'autres bibliothèques pour la i18n comme react-i18next ou formatjs.
Défi pratique : Ajouter une nouvelle page avec un formulaire en deux langues et utiliser le hook personnalisé pour afficher les messages correctement.