What problem does it solve?
This Skill provides clear, production-oriented guidance to implement internationalization in Next.js App Router projects, removing uncertainty around locale routing, message organization, pluralization, date/number formatting, RTL layout, and middleware-based locale detection.
Core Features & Use Cases
- next-intl setup: Configure routing, locale list, and re-export typed message bundles for Server and Client Components.
- Translation APIs: Use useTranslations in components and getTranslations in Server Actions to load scoped messages.
- ICU MessageFormat & formatting: Use ICU for plurals/select and useFormatter for dates, numbers, currency, relative time and lists.
- File organization: Split translations by feature for large apps and merge at runtime.
- RTL & accessibility: Detect RTL locales to set html dir and prefer logical CSS properties to adapt UI.
- Middleware locale detection: Implement URL → Cookie → Accept-Language → default fallback using next-intl middleware matcher.
- Use Case: Build a multi-locale storefront that shows localized product counts, currency formatting, and RTL layouts while automatically detecting the user's locale.
Quick Start
Configure next-intl routing and a messages directory, add middleware that detects locale by URL then cookie then Accept-Language with a default fallback, and use useTranslations/getTranslations and useFormatter in your components.
