nextjs-i18n_skill

Overview

This skill provides a complete Next.js 16 internationalization blueprint using next-intl or a lightweight DIY dictionary approach. It focuses on locale routing, type-safe message management, formatting utilities, and SEO-friendly localization patterns. The content maps to a SOLID module layout and includes routing, message loading, formatting, and error handling best practices.

How this skill works

The skill inspects the app router and introduces a [locale] dynamic segment to route pages per locale, with server-side redirects to a default locale. It integrates next-intl for type-safe message loading, ICU message formatting, and locale-aware formatters, or it offers a DIY dynamic-import dictionary loader for minimal-dependency projects. It also provides proxy and middleware patterns for locale detection, plus hooks and utilities for navigation and programmatic locale changes.

When to use it

• Building multilingual Next.js 16 applications with locale-aware routing
• You need type-safe translations, pluralization, and rich ICU messages
• Implementing language switchers, localized URLs, and hreflang SEO
• Formatting dates, numbers, currencies, lists, and relative time per locale
• Supporting right-to-left (RTL) languages and localized error pages

Best practices

• Organize i18n code under a dedicated module (config, interfaces, services, messages)
• Prefer server-first translation loading to reduce client bundle size
• Use TypeScript types for message keys to get autocompletion and validation
• Namespace messages by feature or page for maintainability
• Add hreflang links and localized metadata for SEO
• Provide a fallback locale and explicit RTL dir handling

Example use cases

• Full production app using next-intl: type-safe messages, async loaders, and rich formatters
• Small site using DIY dictionaries with dynamic imports and simple locale detection
• E-commerce site with currency and number formatting plus locale-based routing
• Content site with SEO hreflang tags, localized metadata, and server-rendered translations
• App requiring localized error pages and per-locale loading/error boundaries