🎯 From Monolingual to Multilingual: A Learning Challenge
As a self-taught developer, I recently took on the challenge of internationalizing CypherTux OS, my personal website built with Next.js 13. Instead of opting for solutions like next-i18next, I chose a manual approach that helped me better understand the mechanisms of App Router and Next.js file system.
🏗 Architecture and Technical Choices
Beyond i18n Frameworks
The decision not to use next-i18next stems from a desire to understand the internal mechanisms of multilingual support. This minimalist approach prioritizes performance and offers maximum flexibility for future site evolution. By building my own solution, I maintained complete control over the architecture while keeping a lightweight codebase.
Project Structure
The content organization directly reflects the URL structure, making navigation and maintenance intuitive:
typescriptsrc/
├── content/
│ └── articles/
│ ├── fr/
│ │ ├── learning/
│ │ ├── projects/
│ │ └── research/
│ └── en/
├── learning/
├── projects/
└── research/
This simple yet effective architecture facilitates adding new content and managing translations.
🛠 Technical Implementation
Intelligent Routing with App Router
Next.js 13's App Router provides elegant multilingual route handling. Here's how I implemented the article page:
typescript// app/articles/[locale]/[category]/[slug]/page.tsx
export default async function ArticlePage({
params: { locale, category, slug }
}: {
params: { locale: string; category: string; slug: string }
}) {
// Article retrieval and display logic
const article = await getArticleBySlug(locale, category, slug);
// Check available translations
const availableTranslations = await getAvailableTranslations(category, slug);
return (
<Article
content={article}
translations={availableTranslations}
locale={locale}
/>
);
}
Bilingual Metadata System
Translations are managed directly in MDX files through a simple yet effective metadata system:
markdown---
title: "My Article"
description: "Article description"
date: "2024-03-15"
category: "learning"
translations:
fr: "mon-article"
en: "my-article"
status: "PUBLISHED"
---
This approach eliminates the need for separate translation files while maintaining a clear and maintainable structure.
📈 Impact and Performance
The current implementation already shows promising results. Loading times remain under one second, maintenance is simplified thanks to the clear file structure, and navigation between languages is smooth and intuitive. SEO optimization comes naturally through language-specific URLs.
🚀 Future Development
The current system lays solid foundations for the future. Next steps include improving automatic detection of user language preferences and continuous performance optimization. The modular structure allows for seamless addition of new features without compromising architectural simplicity.
Conclusion
This implementation demonstrates that it's possible to create a performant multilingual system without relying on complex external solutions. As a self-taught developer, this project has not only deepened my understanding of Next.js 13 but also allowed me to build a custom solution perfectly adapted to my needs.
🌐 Available in:
