feat: Add internationalization support with English, French, and Spanish translations

[yoanbernabeu]

🌍 Overview

This PR adds complete internationalization (i18n) support to the application using next-intl, enabling users to view the guide in English, French, and Spanish.

✨ Features

Languages Supported

• 🇬🇧 English (default)
• 🇫🇷 French
• 🇪🇸 Spanish

What's Translated

• ✅ All page sections and content
• ✅ All interactive examples (URL parsing, TCP handshake, HTML parsing, Layout/Paint/Composite)
• ✅ Footer and metadata
• ✅ Language switcher with flags

Implementation Details

Configuration

• Added next-intl dependency
• Created locale configuration in i18n/config.ts and i18n/request.ts
• Added middleware for locale detection and routing
• Updated next.config.ts to integrate next-intl plugin
• Conditional static export for production builds

Routing

• Locale-based routing: /en/, /fr/, /es/
• Root path / redirects to default locale /en/
• Middleware handles locale detection

Components

• Restructured app router with app/[locale]/layout.tsx and app/[locale]/page.tsx
• Added 'use client' directive to components using useTranslations() hook
• Created LanguageSwitcher component with centered layout and flag emojis
• All section components now use translation keys

Translation Files

• messages/en.json - English translations (baseline)
• messages/fr.json - French translations
• messages/es.json - Spanish translations

🐛 Bug Fixes

• Fixed stale closure issues in parsing-html-into-dom-tree-example.tsx and tcp-handshake-example.tsx by memoizing translation-dependent arrays with useMemo
• Improved title layout to support longer translations (changed max-w-xs to max-w-md, adjusted line height)

📦 Static Export

• Maintains full support for static site generation
• Generates separate HTML files for each locale: out/en/, out/fr/, out/es/
• Production build successfully creates all localized pages

🧪 Testing

• ✅ Development server works with all 3 languages
• ✅ Language switching functions correctly
• ✅ Production build completes successfully
• ✅ No linter errors introduced
• ✅ All interactive examples work in all languages

📸 UI Changes

• Language switcher centered in footer with compact design
• Displays flags and language codes (🇬🇧 EN, 🇫🇷 FR, 🇪🇸 ES)
• Active language highlighted with darker text
• Title layout improved to prevent unnecessary line breaks in longer translations

🔄 Breaking Changes

None. The application maintains backward compatibility with existing English content as the default language.

📚 Related

• Addresses the need for multilingual support
• Uses best practices for Next.js App Router internationalization
• Follows next-intl documentation for static exports

[bristow]

Thanks 🎉