Internationalization Guide

Multi-language Support Configuration

🎯 Overview

NextJS Base uses next-intl for internationalization, supporting multi-language routing and translations.

Supported Languages

Language	Code	File
Simplified Chinese	`zh`	`i18n/messages/zh.json`
English	`en`	`i18n/messages/en.json`

To add languages, simply create the corresponding messages/{locale}.json and register it in i18n/config.js.

⚙️ Configuration

├── i18n/
│   ├── config.js         # Language list, default language
│   ├── messages/         # Translation files
│   │   ├── en.json
│   │   └── zh.json
│   └── request.js        # next-intl request configuration
├── app/(client)/[locale]/layout.js   # Layout with language prefix
└── middleware.js         # Language routing middleware (configured in proxy.js)

Key Configuration

i18n/config.js:

export const locales = ['en', 'zh'];
export const defaultLocale = 'en';

i18n/request.js (Load messages via next-intl):

import { getRequestConfig } from 'next-intl/server';
import { locales, defaultLocale } from './config';

export default getRequestConfig(async ({ requestLocale }) => {
  let locale = await requestLocale;
  if (!locale || !locales.includes(locale)) locale = defaultLocale;

  return {
    locale,
    messages: (await import(`./messages/${locale}.json`)).default,
    timeZone: 'UTC',
    now: new Date(),
  };
});

proxy.js: next-intl middleware handles language prefix and detection (already configured in project).

🧭 Usage

1) Routes with Language Prefix

Client pages placed in app/(client)/[locale]/...
Middleware automatically redirects / → /en (default language), manually access /zh/docs etc. to switch

2) Read Translations in Components

import { useTranslations } from 'next-intl';

export default function Component() {
  const t = useTranslations('common');
  return <button>{t('submit')}</button>;
}

messages/zh.json example:

{
  "common": {
    "submit": "提交",
    "cancel": "取消"
  }
}

3) Avoid Hardcoding

// ✅ Recommended
const t = useTranslations('common')
<button>{t('submit')}</button>

// ❌ Not Recommended: Hardcoding
<button>Submit</button>

4) Maintain Consistency

Ensure all language files have consistent structure:

bun run i18n:check

pnpm run i18n:check

npm run i18n:check

yarn run i18n:check

🔗 Next Steps

Environment Configuration

Go to environment variables and initialization guide

Project Structure

Familiarize with app/(client) and i18n layout

Multi-language Configuration

Extend messages/{lang}.json and config