Step 8: Setup Internationalization (i18n)

Configure translation structure and generate keys for English, French, and Spanish.

Quick Start (Implementation)

Get your app ready for global markets instantly.

1. Copy the Prompt

Navigate to ai_rules/generators/i18n_generator.md and copy the file.

2. Paste into Code AI

Open your AI assistant and paste the prompt. It will read your features list to ensure every screen has translation keys.

Generating translation structure for all features

3. Generate Files

The AI will create:

• src/locales/en.json (Base language)
• src/locales/fr.json (French)
• src/locales/es.json (Spanish)

The generated Language Picker component in Settings

4. Verification

🧠 Deep Dive: How it Works

Namespace Organization

Keys are organized by feature to keep files manageable:

{
  "auth": { "login": "Sign In" },
  "common": { "loading": "Loading..." }
}

Usage: t('auth.login')

Adding New Languages

1. Copy en.json to de.json (German).
2. Ask AI: "Translate this JSON value to German".
3. Register de.json in src/i18n/config.ts.
4. Add "Deutsch" to the options in LanguagePicker.tsx.

Maintenance

Use the built-in script to check for missing keys:

yarn i18n:check

Completion!

You have now completed the standard growth setup!