From fuse-nextjs
Next.js 16 internationalization with next-intl or DIY. Use when implementing i18n, translations, localization, multilingual, language switch, locale routing, or formatters.
How this skill is triggered — by the user, by Claude, or both
Slash command
/fuse-nextjs:nextjs-i18nThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Complete i18n solution with next-intl or DIY dictionary approach.
references/client-components.mdreferences/configuration.mdreferences/core-library.mdreferences/diy-dictionaries.mdreferences/diy-locale-detection.mdreferences/error-files.mdreferences/extraction.mdreferences/formatting.mdreferences/installation.mdreferences/integrations.mdreferences/messages-validation.mdreferences/middleware-proxy.mdreferences/navigation.mdreferences/pages-router.mdreferences/plugin.mdreferences/routing-config.mdreferences/routing-setup.mdreferences/runtime-requirements.mdreferences/seo.mdreferences/server-components.mdComplete i18n solution with next-intl or DIY dictionary approach.
Before ANY implementation, use TeamCreate to spawn 3 agents:
After implementation, run fuse-ai-pilot:sniper for validation.
[locale] dynamic segment| Feature | Benefit |
|---|---|
| App Router native | Full Server Components support |
| Type-safe messages | TypeScript autocompletion for keys |
| ICU MessageFormat | Pluralization, gender, select expressions |
| Async message loading | Load translations on-demand per locale |
| proxy.ts compatible | Works with Next.js 16 proxy pattern |
| Rich formatting | Dates, numbers, lists, relative time |
Full-featured library with routing, formatting, and type safety. Best for production applications needing comprehensive i18n support.
Lightweight approach using dynamic imports for simple translation needs. Good for projects wanting minimal dependencies.
All i18n code organized in modules/cores/i18n/:
src/modules/cores/i18n/src/config/routing.ts - Locale routing configsrc/modules/cores/i18n/messages/en.json - English translationssrc/modules/cores/i18n/messages/fr.json - French translationsproxy.ts - Locale detection and redirect logicAll routes prefixed with [locale] dynamic segment:
/en/about → English about page/fr/about → French about page/ → Redirects to default localeUse localized navigation from next-intl for automatic locale handling:
| Need | Reference |
|---|---|
| Initial setup | installation.md, routing-setup.md |
| Route config | routing-config.md, middleware-proxy.md |
| Translations | translations.md, messages-validation.md |
| Formatting | formatting.md |
| Components | server-components.md, client-components.md |
| Navigation | navigation.md |
| TypeScript | typescript.md |
| SEO | seo.md |
| Testing | testing.md |
| DIY approach | diy-dictionaries.md, diy-locale-detection.md |
{count, plural, one {# item} other {# items}}{gender, select, male {He} female {She} other {They}}dir attribute for right-to-left languagesLocalized error and loading states require specific handling:
[locale]/error.tsx - Localized error boundary[locale]/not-found.tsx - Localized 404 pageglobal-error.tsx - Root error fallbackSee error-files.md for complete patterns.
npx claudepluginhub fusengine/agents --plugin fuse-nextjsGuides internationalization and localization: detecting hardcoded strings, managing translation files, implementing RTL support, and using i18n libraries like react-i18next, next-intl, and gettext.
react-i18next for React 19 - useTranslation hook, TypeScript Selector API, namespaces, pluralization, lazy loading, Suspense integration. Use when implementing translations in React apps (not Next.js).
Implements multi-language support using i18next, gettext, Intl API with pluralization, date/currency formatting, translation workflows, and RTL support for multilingual apps.