The Complete Production SOP: How to Deploy and Run Next-Intl & Multi-Language Localization in Autonomous AI Agents

---
name: "i18n-localization"
description: "Configure type-safe internationalization (i18n), localized routing, and pluralization rules with next-intl."
category: "fullstack"
targetRuntimes: ["codex", "claude-code", "cursor", "windsurf"]
---

# Next-Intl & Multi-Language Localization Rules

1. App Router Only: Always place localized routes inside `app/[locale]/`.
2. Strict Typing: Create `global.d.ts` extending `IntlMessages` to enable autocompletion for translation keys.
3. Dynamic Loading: Implement `src/i18n/request.ts` using `getRequestConfig` to validate `routing.locales`.
4. Middleware: Standardize routing with `createMiddleware(routing)` matching pattern `['/', '/(de|en|es|fr)/:path*']`.
5. Formatting: Always utilize `useTranslations`, `useFormatter`, or `getTranslations` (Server Components).

import en from './messages/en.json';

type Messages = typeof en;

declare global {
  // Enforces type-safe messages via next-intl globally
  interface IntlMessages extends Messages {}
}

import { defineRouting } from 'next-intl/routing';
import { createNavigation } from 'next-intl/navigation';

export const routing = defineRouting({
  locales: ['en', 'es', 'fr'],
  defaultLocale: 'en',
  localePrefix: 'as-needed'
});

export const { Link, redirect, usePathname, useRouter } = createNavigation(routing);

import createMiddleware from 'next-intl/middleware';
import { routing } from './i18n/routing';

export default createMiddleware(routing);

export const config = {
  // Match only internationalized pathnames, skipping api, _next, and static assets
  matcher: ['/', '/(es|en|fr)/:path*', '/((?!_next|_vercel|.*\\..*).*)']
};