i18n for Builders

next-intl is an internationalisation library built specifically for Next.js App Router. It handles locale-based routing through Next.js middleware, provides a typed useTranslations hook for accessing messages, supports ICU message format for complex pluralisation and interpolation, and includes number/date/currency formatters that respect the active locale. It works with both Server and Client Components and avoids the common pitfall of importing large translation files to the client. As of 2026, next-intl is the most widely used and actively maintained i18n solution for Next.js App Router projects.

next-intl uses a Next.js middleware to detect the user's preferred locale from the Accept-Language header or a cookie, and then redirects or rewrites the URL to include the locale prefix (/en/dashboard, /fr/dashboard). Your app directory has a [locale] segment at the top level — pages inside it use the locale parameter to load the correct messages. Each locale URL is treated as a separate page by search engines, enabling proper hreflang tags and locale-specific SEO.

ICU (International Components for Unicode) is a standard syntax for expressing complex translation patterns that vary by variable values. The most common use case is pluralisation: in English, "1 item" vs "2 items" (two forms). In Arabic, there are six plural forms. ICU syntax lets you express all forms in a single message key: `{count, plural, one {# item} other {# items}}`. next-intl supports the full ICU spec including select for gender-aware translations (he/she/they variants) and number formatting within messages.

RTL support requires setting the HTML dir attribute to "rtl" for RTL locales, which flips the reading direction. The modern approach is to use CSS logical properties instead of directional properties: use margin-inline-start instead of margin-left, so the same CSS applies correctly in both LTR and RTL contexts. Some Tailwind v3+ utilities have logical property equivalents (ms- for margin-start). You also need to test your layout with Arabic text which is longer than English equivalents in many cases, and ensure icons with directional meaning (arrows, chevrons) are mirrored for RTL.

As your product evolves, you add new UI strings that need translating and sometimes change or remove existing ones. The process breaks down without tooling. Translation management platforms like Crowdin, Lokalise, and Phrase integrate with your repository — you push English source strings, translators work in a web UI, and translations are merged back as pull requests. They also flag missing translations, track translation progress by language, and provide machine translation suggestions for initial drafts. For small teams, starting with JSON files in the repo and using Crowdin once you have more than two languages is a common approach.