Add A New Language
Extend product locale routing, translation files, and optional docs content.
The app and the docs can have different language behavior. Product pages may use route-aware locale prefixes, while docs use a bottom language switch with no URL changes.
Add product locale config
In the product i18n config, add the new locale:
export const i18nConfig = {
defaultLocale: "en",
locales: {
en: { flag: "US", name: "English", hreflang: "en" },
zh: { flag: "CN", name: "Chinese", hreflang: "zh-CN" },
ja: { flag: "JP", name: "Japanese", hreflang: "ja" },
},
localePrefix: "as-needed",
} as const;Copy translation files
Copy an existing locale directory:
src/i18n/messages/ja/
auth.json
blog.json
captcha.json
common.json
contact.json
dashboard.json
email.json
footer.json
landing.json
navbar.json
pricing.json
seo.jsonKeep JSON keys identical and translate only values.
Register namespaces
If you add a new namespace, register it in the request loader:
messages: {
common: (await import(`./messages/${locale}/common.json`)).default,
pricing: (await import(`./messages/${locale}/pricing.json`)).default,
}Use locale-aware navigation
For product pages, use the project's locale-aware navigation helpers when available:
import { Link, useRouter } from "@/i18n/navigation";Write paths such as /pricing and /dashboard; the routing helper handles locale prefixes.
Add docs content if needed
Docs locales live under:
content/docs/<locale>/Keep the same slugs as existing docs languages and add the locale to the docs language helper and switcher.
After adding a language, verify product routes, SEO alternates, docs language switching, and search.