Internationalization with Claude Code: next-intl, Type-Safe Translations, and RTL Support
Adding i18n after the fact means hunting down every hardcoded string, rebuilding every date format, and retrofitting every layout for RTL. It's a full rewrite disguised as a feature. Claude Code, with CLAUDE.md rules defined upfront, generates proper i18n architecture from the first line of code. Here's the exact setup. Step 1: Define i18n Rules in CLAUDE.md ## Internationalization Rules - All UI strings via i18n keys — no hardcoded text in components - Dates via `Intl.DateTimeFormat` or `date-fns/locale` (not `.toLocaleDateString()` ) - Currency via `Intl.NumberFormat` with explicit currency code - Plurals via ICU Message Format: `{count, plural, =0 {...} =1 {...} other {...}}` - Message files: `messages/[lang]/[namespace].json` , camelCase keys - TypeScript type-safe translations via next-intl - RTL layout: use `margin-inline-start/end` , `border-inline-*` , `text-align: start` - `dir="rtl"` on `<html>` for Arabic/Hebrew/Persian locales Step 2: Message Files with ICU Plurals messages
Continue reading on Dev.to
Opens in a new tab
