next-intl-app-router

What it does

This skill integrates next-intl into Next.js applications using the App Router architecture to enable robust internationalization. It allows AI agents to dynamically manage locale-specific content and language switching directly within the application's routing system.

When to use it

• Building multi-language websites that require seamless navigation between different locales.
• Managing dynamic content where text, dates, or numbers need to adapt based on the user's selected language.
• Implementing a centralized configuration for handling locale-specific metadata and resource loading in Next.js projects.

Key capabilities

• App Router Integration: Specifically designed to work with the modern Next.js App Router structure rather than the Pages Router.
• Locale Management: Provides hooks and utilities to detect, switch, and persist user language preferences.
• Dynamic Segments: Supports defining locale-specific routes using dynamic segments (e.g., /en/about, /fr/contact).

Example prompts

• "Set up next-intl in a new Next.js App Router project and configure the default locale to English."
• "Create a language switcher component that updates the URL locale without reloading the page using this skill."
• "How do I format dates and numbers correctly for different regions within my Next.js app using next-intl?"

Tips & gotchas

Ensure your project is already initialized with the Next.js App Router, as this skill does not support legacy Pages Router setups. You must define a locales array in your configuration file to specify which languages are supported before attempting to switch between them.