fusengine/nextjs-i18n
plugins/nextjs-expert/skills/nextjs-i18n/SKILL.md
Next.js 16 internationalization with next-intl or DIY. Use when implementing i18n, translations, localization, multilingual, language switch, locale routing, or formatters.
$ install --global
skillsauthnpx skillsauth add fusengine/agents nextjs-i18nInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 5, 2026, 12:07 AM10.9s24 files scanned
SKILL.md
- name:
- nextjs-i18n
- description:
- Next.js 16 internationalization with next-intl or DIY. Use when implementing i18n, translations, localization, multilingual, language switch, locale routing, or formatters.
- next-intl:
- 4.0
- nextjs:
- 16
- user-invocable:
- true
- references:
- references/installation.md, references/pages-router.md, references/routing-setup.md, references/routing-config.md, references/translations.md, references/formatting.md, references/navigation.md, references/server-components.md, references/client-components.md, references/middleware-proxy.md, references/error-files.md, references/configuration.md, references/plugin.md, references/extraction.md, references/messages-validation.md, references/typescript.md, references/testing.md, references/integrations.md, references/seo.md, references/core-library.md, references/runtime-requirements.md, references/diy-dictionaries.md, references/diy-locale-detection.md
- related-skills:
- nextjs-16, solid-nextjs
Next.js 16 Internationalization
Complete i18n solution with next-intl or DIY dictionary approach.
Agent Workflow (MANDATORY)
Before ANY implementation, use TeamCreate to spawn 3 agents:
- fuse-ai-pilot:explore-codebase - Analyze existing i18n setup and message files
- fuse-ai-pilot:research-expert - Verify latest next-intl docs via Context7/Exa
- mcp__context7__query-docs - Check locale config and patterns
After implementation, run fuse-ai-pilot:sniper for validation.
Overview
When to Use
- Building multilingual Next.js 16 applications
- Need locale-based routing with
[locale]dynamic segment - Implementing language switcher and URL localization
- Formatting dates, numbers, currencies, and relative times per locale
- SEO optimization with hreflang tags and localized metadata
- Supporting right-to-left (RTL) languages
Why next-intl
| 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 |
Two Approaches
1. next-intl (Recommended)
Full-featured library with routing, formatting, and type safety. Best for production applications needing comprehensive i18n support.
2. DIY Dictionary
Lightweight approach using dynamic imports for simple translation needs. Good for projects wanting minimal dependencies.
SOLID Architecture
Module Structure
All i18n code organized in modules/cores/i18n/:
- config/ - Routing configuration, locale definitions
- interfaces/ - TypeScript types for messages and locales
- services/ - Request handlers, message loaders
- messages/ - JSON translation files per locale
File Locations
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 logic
Routing Patterns
Locale Segment
All routes prefixed with [locale] dynamic segment:
/en/about→ English about page/fr/about→ French about page/→ Redirects to default locale
Navigation Components
Use localized navigation from next-intl for automatic locale handling:
- Link - Locale-aware anchor links
- redirect - Server-side locale redirect
- usePathname - Current path without locale
- useRouter - Programmatic navigation
Reference Guide
| 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 |
Message Formatting
ICU MessageFormat
- Pluralization -
{count, plural, one {# item} other {# items}} - Select -
{gender, select, male {He} female {She} other {They}} - Rich text - Support for bold, italic, links in messages
Formatters
- formatDate - Locale-aware date formatting
- formatNumber - Currency, percentages, decimals
- formatList - Conjunction/disjunction lists
- formatRelativeTime - "2 hours ago", "in 3 days"
Best Practices
- Type-safe keys - Use TypeScript for message key autocompletion
- Namespace messages - Organize by feature/page for maintainability
- Server-first - Load translations on server, avoid client bundles
- SEO hreflang - Add alternate links for all locales
- RTL support - Use
dirattribute for right-to-left languages - Fallback locale - Configure default for missing translations
Error Handling
Special Files
Localized error and loading states require specific handling:
[locale]/error.tsx- Localized error boundary[locale]/not-found.tsx- Localized 404 pageglobal-error.tsx- Root error fallback
See error-files.md for complete patterns.
Related Skills
fusengine/ux-copy
testing
VerifiedTrustedCommunity
Copy self-audit and ban-lists — filler verbs/hype adjectives, slop placeholder names, fake-precise numbers, Title Case headlines, humor in error copy ('Oops!'), em-dash crutch, one copy register per page.
20SKILL.mdUpdated Jul 15, 2026
fusengine/design-webapp
development
VerifiedTrustedCommunity
Logged-in web apps — dashboards, auth flows, settings, onboarding, data tables, command palettes, modals, toasts. Register `product`: density and glance-speed over marketing polish, no hero/CTA-tricks, every data surface covers empty/loading/error explicitly, tables and dataviz follow preattentive-processing rules.
20SKILL.mdUpdated Jul 15, 2026
fusengine/design-web
development
VerifiedTrustedCommunity
Marketing sites, landing pages, campaign pages — register `brand` (design IS the product). Structure comes from the register's POV + a macrostructure pick, never from copying an inspiration site's section flow. Hero discipline, deviated section order, asymmetric grids, and a silhouette lookalike-test gate before ship.
20SKILL.mdUpdated Jul 15, 2026
fusengine/design-system
development
VerifiedTrustedCommunity
Token-strategy core — OKLCH color rules, neutral tinting, accent-commitment levels, type scale, 8pt spacing grid, touch targets, and the canonical output format of design-system.md (the file the harness gates on). This is routing step 1 of design-method/SKILL.md — read it before design-web/design-webapp/design-ios/design-android, before picking or auditing a single color/type/spacing value.
20SKILL.mdUpdated Jul 13, 2026