# Frontend Next I18N > next-intl regional locales (en-ae/ar-ae/en-gl/ar-gl), RTL, message files, locale-aware navigation, language and region switchers. Use when adding translations, locales, RTL layout, or regional routing in Next.js apps. - Skill: `xmuhameed/frontend-next-i18n` (Agent Skill) - Install (CLI): `npx skillmds@latest add xmuhameed/frontend-next-i18n` - Raw SKILL.md: https://api.skillmd.com/api/skills/xmuhameed/frontend-next-i18n/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: xmuhameed (https://skillmd.com/u/xmuhameed) - Updated: 2026-09-21 - Page: https://skillmd.com/skills/xmuhameed/frontend-next-i18n --- # i18n (Regional Locales) ## Locales ```typescript // i18n/routing.ts locales: ['en-ae', 'ar-ae', 'en-gl', 'ar-gl'] defaultLocale: 'en-ae' // *-ae = UAE local shipping, *-gl = international ``` Messages: `en-ae`/`en-gl` → `messages/en.json`, `ar-*` → `messages/ar.json` ## Navigation (mandatory) ```typescript import { Link, useRouter, usePathname, redirect } from '@/i18n/navigation'; // NEVER raw next/link or next/navigation for user routes ``` ## Server ```typescript import { setRequestLocale, getTranslations } from 'next-intl/server'; setRequestLocale(locale); const t = await getTranslations({ locale, namespace: 'checkout' }); ``` ## Client ```typescript import { useTranslations, useLocale } from 'next-intl'; const t = useTranslations('Auth'); const locale = useLocale(); // "en-ae" ``` ## RTL ```tsx ``` ## Bilingual Data (from API) ```typescript const name = locale.includes('ar') ? product.name_ar : product.name_en; // or getLang(locale) from utils/locale.ts ``` UI strings → JSON messages. Entity content → `_en`/`_ar` API fields. ## Language Switcher Swap language part only: `en-ae` ↔ `ar-ae`, `en-gl` ↔ `ar-gl`. Preserve search params (tracking). ## Region Switcher `en-ae` ↔ `en-gl` via country config store. May trigger cart conflict check. ## Path Helper ```typescript withLocalePath('/products/foo', 'en-gl') // → "/en-gl/products/foo" ``` ## Middleware Legacy `/en` → `/en-ae`. Root `/` geo redirect. next-intl routing after auth checks.