LilMikey-CN/i18n-workflow

Golden rule

Never hardcode any user-facing string. Every piece of text visible to users must come from a translation key. The Stop hook will catch hardcoded Chinese characters.

File structure

src/i18n/
├── config.ts          # locale config
├── request.ts         # next-intl request config
└── messages/
    ├── en.json        # English translations
    └── zh.json        # Chinese translations

Adding new text

1. Add the key to BOTH en.json and zh.json at the same time
2. Use nested keys matching the page/component structure:

// en.json
{
  "resource": {
    "create": {
      "title": "Post a resource",
      "haveLabel": "I have...",
      "wantLabel": "I need...",
      "submit": "Post"
    }
  }
}

// zh.json
{
  "resource": {
    "create": {
      "title": "发布资源",
      "haveLabel": "我有...",
      "wantLabel": "我需要...",
      "submit": "发布"
    }
  }
}

Usage in components

Server Component:

import { getTranslations } from 'next-intl/server';

export default async function Page() {
  const t = await getTranslations('resource.create');
  return <h1>{t('title')}</h1>;
}

Client Component:

'use client';
import { useTranslations } from 'next-intl';

export function CreateForm() {
  const t = useTranslations('resource.create');
  return <button>{t('submit')}</button>;
}

Key naming convention

• Page titles: {page}.title
• Form labels: {page}.{fieldName}Label
• Buttons: {page}.{action} (submit, cancel, delete)
• Errors: errors.{errorType}
• Common: common.{text} (save, cancel, loading, back)

Locale switching

The locale switcher lives in the Navbar. It changes the [locale] route segment. User's preferred locale is stored in the User model and set on login.