Description
The frontend has no internationalization (i18n) support. Utility management is a global application serving users in multiple countries. All text is hardcoded in English with no translation mechanism.
i18n gaps:
- No i18n library (next-intl, react-i18next, or similar)
- No locale detection (browser language preference)
- No RTL language support (Arabic, Hebrew)
- No date/time formatting (locale-aware)
- No number formatting for currencies and units (1,000.50 vs 1.000,50)
- No translated error messages
- No locale-aware chart formatting (date axis, number formats)
- No content translation strategy or translation file structure
Technical Context & Impact
- Affected Components/Files:
app/page.tsx, app/layout.tsx, src/lib/i18n/ (missing)
- Impact: Application is English-only; limits global adoption
Step-by-Step Implementation Guide
- Install next-intl:
npm install next-intl
- Create message files:
messages/en.json, messages/es.json, messages/fr.json, messages/de.json with translation strings
- Set up middleware:
src/middleware.ts for locale detection and routing:
- Detect locale from browser (
Accept-Language header)
- Fallback to default locale (en)
- Store locale preference in cookie
- Redirect to locale path:
/en/dashboard, /es/dashboard
- Configure i18n routing: Update
next.config.ts with i18n config for locale domains and default locale
- Create translation components:
FormattedMessage(id, values) - replaces {userCount} style placeholdersLocaleSelector.tsx - dropdown to switch language- Translated
metadata.title and metadata.description per locale
- Translate all UI text: Extract all hardcoded strings to translation files with descriptive keys
- Add locale-aware formatting:
- Dates:
useFormatter().dateTime(date, { dateStyle: 'full' })
- Numbers:
useFormatter().number(value, { style: 'currency', currency: 'USD' })
- Units:
useFormatter().number(value, { style: 'unit', unit: 'kilowatt-hour' })
- Handle RTL: Add
dir="rtl" to <html> for Arabic locale; test all components with RTL padding/margin overrides
Verification & Testing Steps
- Set browser to Spanish -> visit app -> verify UI shows Spanish text
- Use locale selector to switch to French -> verify all text updates immediately
- Test date formatting: en shows "June 11, 2026", de shows "11. Juni 2026"
- Test number formatting: en shows "1,000.50", fr shows "1 000,50"
- Test RTL: switch to Arabic -> verify layout reverses, text aligns right
- Run
npx tsc --noEmit to verify type safety
Description
The frontend has no internationalization (i18n) support. Utility management is a global application serving users in multiple countries. All text is hardcoded in English with no translation mechanism.
i18n gaps:
Technical Context & Impact
app/page.tsx,app/layout.tsx,src/lib/i18n/(missing)Step-by-Step Implementation Guide
npm install next-intlmessages/en.json,messages/es.json,messages/fr.json,messages/de.jsonwith translation stringssrc/middleware.tsfor locale detection and routing:Accept-Languageheader)/en/dashboard,/es/dashboardnext.config.tswithi18nconfig for locale domains and default localeFormattedMessage(id, values)- replaces{userCount}style placeholdersLocaleSelector.tsx- dropdown to switch languagemetadata.titleandmetadata.descriptionper localeuseFormatter().dateTime(date, { dateStyle: 'full' })useFormatter().number(value, { style: 'currency', currency: 'USD' })useFormatter().number(value, { style: 'unit', unit: 'kilowatt-hour' })dir="rtl"to<html>for Arabic locale; test all components with RTL padding/margin overridesVerification & Testing Steps
npx tsc --noEmitto verify type safety