Frontend & Design

next-intl Internationalization

Add internationalization to Next.js App Router applications with next-intl, supporting translations, formatting, and locale routing.

Claude Code Cursor Copilot Windsurf

Overview

next-intl is the leading internationalization library for Next.js App Router, providing type-safe translations, ICU message formatting, locale-based routing, and server component support. AI agents can set up the complete i18n infrastructure, generate translation files, and implement locale-aware routing with middleware.

The library supports both server and client components, making it fully compatible with the App Router architecture. Your AI agent can configure the middleware for locale detection and URL rewriting, set up message files for each locale, implement the `useTranslations` hook for client components, and use `getTranslations` for server components.

next-intl handles complex formatting scenarios including dates, times, numbers, pluralization, and rich text with embedded components. AI agents can generate translation JSON files, implement locale switchers, set up default locales, and configure SEO-friendly hreflang tags for multilingual sites.

Who Is This For?

Next.js teams adding multi-language support to their applications
Developers implementing locale-based routing with URL prefixes
Teams managing translation files across multiple locales
Engineers building SEO-optimized multilingual sites

Installation

Setup for Claude Code

npm install next-intl

Configuration

// i18n/request.ts
import { getRequestConfig } from "next-intl/server";

export default getRequestConfig(async ({ locale }) => ({
  messages: (await import(`../messages/${locale}.json`)).default,
}));

// middleware.ts
import createMiddleware from "next-intl/middleware";
export default createMiddleware({
  locales: ["en", "ar", "es"],
  defaultLocale: "en",
});