November 22, 2025 - Building a Multi-Language Website

🎯 Goal

Today I worked on implementing multi-language support for my personal website using Nextra and Next.js. The goal was to add English, Simplified Chinese, and Traditional Chinese support.

⚡ Challenges Faced

Nextra Configuration Issues

• Hydration errors: Kept running into React hydration mismatches when trying to add language selectors
• Directory structure: Had to restructure the entire pages directory multiple times
• CSS conflicts: Custom CSS hiding rules interfered with Nextra's natural behavior

Navigation Problems

• Mixed language display: Initially showed all language directories in the navigation
• User feedback: Language icons overlapped with GitHub icon
• Complex solutions tried: Attempted Next.js i18n, custom React components, DOM manipulation

🔧 Solutions That Worked

Final Architecture

pages/
├── index.mdx              # English homepage
├── about-me.mdx           # English pages
├── ai-tech/
├── ai-pm.mdx
├── projects.mdx
├── blog.mdx
├── contact.mdx
├── blog/
│   ├── tech-diary.mdx     # Tech diary section
│   └── tech-diary/
│       └── 2025-11-22.mdx # Individual diary entries
└── _meta.json             # English navigation config

Key Learnings

1. Simplicity wins: Complex CSS hiding rules caused more problems than they solved
2. Nextra conventions: Let the framework handle routing naturally rather than fighting it
3. User feedback loop: Real user testing revealed issues that automated tests missed

💭 Reflection

Today was a reminder that sometimes the simplest solution is the best one. I spent hours trying to perfect the multi-language implementation, only to realize that removing the complexity entirely was the right answer for this personal website.

Mood: 😤 Challenging but rewarding Weather: Cloudy Coffee Count: 3 cups