skills.rest
johinsDev
johinsDevCOMMUNITY
Explore all skills by this author →
GitHub

next-intl

Implement next-intl v4 locale-aware routing and typed navigation in Next.js App Router monorepos.

Updated May 7, 2026
Search Tags:#monorepo#i18n#next-intl#locale routing#typed navigation#Next.js App Router#message loading
One-click install
npx skills add https://github.com/johinsDev/loyalty-app --skill next-intl
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: next-intl
Source: https://github.com/johinsDev/loyalty-app/tree/main/.claude/skills/next-intl
Command: npx skills add https://github.com/johinsDev/loyalty-app --skill next-intl

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

next-intl removes the guesswork of wiring i18n in a Next.js monorepo by providing a consistent, locale-aware pattern for routing, message loading, and typed navigation across both the customer PWA and admin CRM.

Core Features & Use Cases

  • Consistent locale routing in App Router: Defines locales, default locale, locale prefix behavior, and translated public URLs via a shared routing convention.
  • Automatic language detection and redirects: Uses middleware-style request interception to select the best locale using cookie and Accept-Language, then redirects while keeping a stable NEXT_LOCALE cookie.
  • Typed navigation that prevents wrong-locale links: Replaces raw next/link and next/navigation imports in localized routes with a typed wrapper from '@/i18n/navigation' to avoid silent misrouting.
  • Server/client translation APIs with correct request scoping: Supports server components via getTranslations and client components via useTranslations, with guardrails to preserve static rendering behavior.
  • Route and metadata localization: Handles translating routes through the pathnames map and localizing generateMetadata using explicit locale input.

Quick Start

Use the next-intl skill to onboard a teammate by walking them through where messages live, how NEXT_LOCALE is detected, and how to translate a new route without breaking locale-aware navigation.

Frequently Asked Questions about next-intl

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up locale-aware routing in a Next.js App Router monorepo?▼

To set up locale-aware routing in a Next.js App Router monorepo, define locales, default locale, and prefix behavior in a shared routing convention, then use a proxy-based middleware to intercept requests and redirect users based on cookie and Accept-Language headers.

How do I prevent wrong-locale navigation links in Next.js internationalization?▼

Prevent wrong-locale navigation links by replacing raw next/link and next/navigation imports with a typed navigation wrapper from '@/i18n/navigation'. This ensures localized routes redirect correctly and avoids silent misrouting across your application.

How does Next.js handle server and client translation APIs for i18n?▼

Next.js handles internationalization by supporting server components via getTranslations and client components via useTranslations. You must use setRequestLocale for server rendering to preserve static rendering behavior and ensure correct request scoping.

How do I translate route slugs and generate localized metadata in Next.js?▼

Translate route slugs in Next.js by defining a pathnames map that translates public URLs. Generate localized metadata by using the generateMetadata function with explicit locale input to ensure search engines and users see the correct language.

Can I use next-intl for internationalization across multiple apps in a monorepo?▼

Yes, you can use next-intl for internationalization across multiple apps in a monorepo. It provides a consistent i18n directory structure and unified patterns for message loading, locale detection, and typed navigation across both PWAs and CRMs.

Why are incorrect imports causing wrong-locale navigation in my Next.js app?▼

Incorrect imports cause wrong-locale navigation when raw next/link or next/navigation are used instead of the typed wrapper from '@/i18n/navigation'. Following next-intl v4 conventions for proxy-based locale detection prevents this silent misrouting.

Related Skills

Explore More Software Engineering Skills→
nguyenvanlinh1902nguyenvanlinh1902

web-frameworks

Build Next.js apps with Turborepo monorepos and RemixIcon for SSR/ISR.

Community
Intermediate
barronlrothbarronlroth
1

asc-localize-metadata

Translate and synchronize App Store metadata across locales using the asc CLI.

Community
Advanced
reginadelrio-vadaireginadelrio-vadai

nextjs-supabase-auth

Integrate Supabase Auth with Next.js App Router using @supabase/ssr.

Community
Advanced
AbdullahmohammadarefAbdullahmohammadaref

i18n

Integrate next-intl or react-i18next for locale-aware text and formatting.

Community
Advanced