nextjs-i18n

Name: nextjs-i18n
Author: fusengine

github.com/fusengineDevelopment34109 installsUpdated 2w ago

About nextjs-i18n

nextjs-i18n is a skill for implementing internationalization in Next.js 16 App Router applications. It covers next-intl and a lightweight dictionary option, along with localized routing, formatting, and SEO.

Key features

01next-intl and DIY dictionary approaches
02Locale-prefixed routing and navigation
03Localized date and number formatting
04RTL language support
05hreflang and localized metadata
06Localized error and not-found files

Use cases

01Adding language-based routes to a Next.js app
02Creating locale-aware navigation and language switching
03Formatting dates, currency, and numbers by locale
04Adding RTL layouts and hreflang SEO metadata

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/fusengine/agents --skill nextjs-i18n

After installing, type/nextjs-i18nin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/

client-components.md

configuration.md

core-library.md

diy-dictionaries.md

diy-locale-detection.md

error-files.md

extraction.md

formatting.md

installation.md

integrations.md

messages-validation.md

middleware-proxy.md

navigation.md

pages-router.md

plugin.md

routing-config.md

routing-setup.md

runtime-requirements.md

seo.md

server-components.md

testing.md

translations.md

typescript.md

Details

From the project README

Implements internationalization for Next.js 16 App Router apps via two approaches: next-intl (recommended — full Server Components support, type-safe messages, ICU MessageFormat, async message loading, proxy.ts-compatible routing) or a lightweight DIY dictionary approach using dynamic imports.

Covers [locale]-prefixed routing, localized navigation components (Link, redirect, usePathname, useRouter), date/number/currency/relative-time formatting, RTL language support, SEO hreflang tags, and localized special files ([locale]/error.tsx, [locale]/not-found.tsx, global-error.tsx). This is the Next.js-specific i18n skill (App Router routing, proxy.ts integration) — for plain React apps without Next.js see react-i18n, and for Astro see astro-i18n.

Next.js 16 Internationalization

Complete i18n solution with next-intl or DIY dictionary approach.

Agent Workflow (MANDATORY)

Before ANY implementation, spawn 3 agents in parallel, one Agent call each with a name:

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 config
src/modules/cores/i18n/messages/en.json - English translations
src/modules/cores/i18n/messages/es.json - Spanish translations
proxy.ts - Locale detection and redirect logic

Routing Patterns

Locale Segment

All routes prefixed with [locale] dynamic segment:

/en/about → English about page
/es/about → Spanish 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 dir attribute 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 page
global-error.tsx - Root error fallback

See error-files.md for complete patterns.

Comments

Markdown supported

Details

Author: fusengine
Repository: fusengine/agents
Category: Development
Installs: 109
GitHub stars: 34

Report

More skills

All skills

remotion-render

github.com/inference-sh

1.6M

Render videos from React/Remotion component code via inference.sh. Pass TSX code, get MP4. Supports all Remotion APIs: useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, Sequence. Configurable resolution, FPS, duration, codec. Use for: programmatic video generation, animated graphics, motion design, data-driven videos, React animations to video. Triggers: remotion, render video from code, tsx to video, react video, programmatic video, remotion render, code to video, animated video, motion graphics code, react animation video

improve-codebase-architecture

github.com/mattpocock

1.2M

Scan a codebase for architecture improvement opportunities, present them as a visual HTML report, then dive deep into whichever one you pick.

design-mobile-apps

github.com/designed-by-ai

1.1M

Design mobile app screens with Sleek, edit Sleek projects, and implement their designs in React Native or HTML

vercel-react-best-practices

github.com/vercel-labs

848.6k

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.