🎯 Du monolingue au multilingue : un nouveau défi d'apprentissage
En tant que développeur autodidacte, j'ai récemment relevé le défi d'internationaliser CypherTux OS, mon site personnel construit avec Next.js 13. Au lieu d'opter pour des solutions comme next-i18next, j'ai choisi une approche manuelle qui m'a permis de mieux comprendre les mécanismes de l'App Router et du système de fichiers de Next.js.
🏗 Architecture et choix techniques
Une approche sans framework i18n
La décision de ne pas utiliser next-i18next découle d'une volonté de comprendre les mécanismes internes du multilinguisme. Cette approche minimaliste privilégie la performance et offre une flexibilité maximale pour l'évolution future du site. En construisant ma propre solution, j'ai pu garder un contrôle total sur l'architecture tout en maintenant une base de code légère.
Structure du projet
L'organisation du contenu reflète directement la structure des URLs, rendant la navigation et la maintenance intuitives :
typescriptsrc/
├── content/
│ └── articles/
│ ├── fr/
│ │ ├── learning/
│ │ ├── projects/
│ │ └── research/
│ └── en/
├── learning/
├── projects/
└── research/
Cette architecture simple mais efficace facilite l'ajout de nouveaux contenus et la gestion des traductions.
🛠 Implémentation technique
Routing intelligent avec l'App Router
L'App Router de Next.js 13 offre une gestion élégante des routes multilingues. Voici comment j'ai implémenté la page d'article :
typescript// app/articles/[locale]/[category]/[slug]/page.tsx
export default async function ArticlePage({
params: { locale, category, slug }
}: {
params: { locale: string; category: string; slug: string }
}) {
// Logique de récupération et affichage de l'article
const article = await getArticleBySlug(locale, category, slug);
// Vérification des traductions disponibles
const availableTranslations = await getAvailableTranslations(category, slug);
return (
<Article
content={article}
translations={availableTranslations}
locale={locale}
/>
);
}
Système de métadonnées bilingues
Les traductions sont gérées directement dans les fichiers MDX via un système de métadonnées simple mais efficace :
markdown---
title: "Mon Article"
description: "Description de l'article"
date: "2024-03-15"
category: "learning"
translations:
fr: "mon-article"
en: "my-article"
status: "PUBLISHED"
---
Cette approche élimine le besoin de fichiers de traduction séparés tout en maintenant une structure claire et maintenable.
📈 Impact et performances
L'implémentation actuelle démontre déjà des résultats encourageants. Les temps de chargement restent sous la barre de la seconde, la maintenance est simplifiée grâce à la structure claire des fichiers, et la navigation entre les langues est fluide et intuitive. L'optimisation SEO est naturellement prise en compte grâce aux URLs spécifiques à chaque langue.
🚀 Perspectives d'évolution
Le système actuel pose des bases solides pour l'avenir. Les prochaines étapes incluent l'amélioration de la détection automatique de la langue préférée de l'utilisateur et l'optimisation continue des performances. La structure modulaire permet d'envisager sereinement l'ajout de nouvelles fonctionnalités sans compromettre la simplicité de l'architecture.
Conclusion
Cette implémentation démontre qu'il est possible de créer un système multilingue performant sans dépendre de solutions externes complexes. En tant que développeur autodidacte, ce projet m'a permis non seulement d'approfondir ma compréhension de Next.js 13, mais aussi de construire une solution sur mesure parfaitement adaptée à mes besoins.
🌐 Disponible en :
