feat: implement i18n with next-intl for Chinese Simplified and Traditional support

[Copilot]

Overview

This PR implements comprehensive internationalization (i18n) support for the RxChat application using next-intl, adding Chinese Simplified and Chinese Traditional language support alongside English.

Supported Languages

• 🇬🇧 English (en) - Default language
• 🇨🇳 Chinese Simplified (zh-CN) - 简体中文
• 🇹🇼 Chinese Traditional (zh-TW) - 繁體中文

Key Changes

1. Infrastructure Setup

• Installed and configured next-intl v4.3.9 for Next.js 15 App Router
• Restructured app directory to support locale-based routing with [locale] segment
• Updated middleware to handle locale detection, routing, and authentication with locale-aware redirects
• Configured next.config.ts with next-intl plugin

2. Translation System

Created comprehensive translation files for all three languages covering:

• Greeting messages
• Suggested action prompts
• Authentication pages (login/register)
• Error messages and validation feedback
• Language selector UI

All translation files maintain consistent structure and keys across locales, stored in locales/{locale}/common.json.

3. Component Updates

Translated Components:

• components/greeting.tsx - Dynamic welcome messages
• components/suggested-actions.tsx - Localized AI prompt suggestions
• app/[locale]/(auth)/login/page.tsx - Full login page translation
• app/[locale]/(auth)/register/page.tsx - Full registration page translation

New Components:

• components/language-selector.tsx - Dropdown language switcher integrated into sidebar user navigation

4. URL Structure

All routes now include locale prefix:

/en/login          → English
/zh-CN/login       → Chinese Simplified
/zh-TW/login       → Chinese Traditional

5. Navigation Helpers

Created locale-aware navigation helpers in lib/i18n/routing.ts that wrap Next.js navigation APIs:

import { Link, redirect, useRouter, usePathname } from '@/lib/i18n/routing';

These ensure locale is maintained during navigation and redirects.

6. Import Path Updates

After restructuring the app directory, updated 50+ files with corrected import paths from:

• @/app/(auth)/auth → @/app/[locale]/(auth)/auth
• @/app/(chat)/actions → @/app/[locale]/(chat)/actions

Testing

Unit Tests (17 new tests, all passing)

• lib/i18n/config.spec.ts - Validates locale configuration
• locales/locales.spec.ts - Ensures translation consistency across all locales

Code Quality

• ✅ Linting passed (only pre-existing warnings remain)
• ✅ Code formatted with Biome
• ✅ TypeScript compilation successful
• ✅ Existing unit tests still passing (667 tests)

Documentation

Added comprehensive documentation:

• docs/i18n.md - Complete implementation guide with usage examples, best practices, and troubleshooting
• docs/i18n-architecture.md - System architecture documentation with flow diagrams
• README.md - Updated with i18n feature information

Usage

Users can switch languages via the dropdown in the sidebar user menu:

1. Click on user menu in sidebar
2. Select preferred language from dropdown
3. Entire interface updates immediately
4. Language preference maintained across navigation

Technical Implementation

Middleware Flow:

User Request → Middleware (locale detection) → Root Layout (validation) 
→ Locale Layout (i18n context) → Components (translations)

Configuration Files:

• lib/i18n/config.ts - Locale definitions and names
• lib/i18n/request.ts - next-intl request configuration
• lib/i18n/routing.ts - Routing configuration and navigation wrappers
• middleware.ts - Locale detection and auth handling

Breaking Changes

⚠️ URL Structure Change: All routes now require locale prefix. Existing bookmarks or links without locale prefix will be automatically redirected to the default locale (/en).

Migration for developers:

• Replace next/link and next/navigation imports with @/lib/i18n/routing equivalents
• Use locale-aware navigation helpers for programmatic navigation
• Test components with different locales using NextIntlClientProvider

Future Enhancements

The i18n infrastructure is now in place to easily add more languages:

1. Add locale to lib/i18n/config.ts
2. Create translation file in locales/{locale}/common.json
3. Update tests to include new locale

Potential additions: French, German, Japanese, Korean, Spanish, etc.

Screenshots

The language selector has been integrated into the existing sidebar user navigation menu, appearing above the theme toggle option. When clicked, it displays a dropdown with all available languages using both their native names and English labels.

---

Closes #[issue-number]

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• router.mcprouter.app
  • Triggering command: node generate.js (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

Use next i18n to translate the app into Chinese simplified and Chinese traditional

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
rxchat-web	Canceled			Oct 3, 2025 11:34pm