Internationalizing Websites
Complete workflow for adding multi-language support to Next.js websites with SEO best practices.
When to use this Skill
- Adding new language versions to existing website
- Setting up i18n (internationalization) for new website
- Configuring SEO for multiple languages
- User mentions: "add language", "translation", "localization", "hreflang", "multi-language"
Supported Languages
Common target markets:
- πΊπΈ English (en) - Global market
- π―π΅ Japanese (ja) - Asian market
- π¨π³ Chinese (zh) - Chinese market
Extended support available for:
- Korean (ko), Portuguese (pt), Spanish (es), French (fr), German (de)
- Arabic (ar), Vietnamese (vi), Hindi (hi), Indonesian (id), Thai (th)
- Traditional Chinese (zh-hk), Italian (it), Russian (ru)
Internationalization Workflow
Copy this checklist and track your progress:
i18n Progress:
- [ ] Step 1: Prepare base language files
- [ ] Step 2: Add new language files
- [ ] Step 3: Update configuration files
- [ ] Step 4: Add translations
- [ ] Step 5: Configure SEO elements
- [ ] Step 6: Validate and test
Step 1: Prepare base language files
Ensure English (en.json) files exist as templates:
Required directories:
i18n/messages/en.json - Main translations
i18n/pages/landing/en.json - Landing page translations
Step 2: Add new language files
Run the language addition script:
node scripts/i18n-add-languages.mjs
What this script does:
- Copies
en.json to all target language files
- Updates
i18n/locale.ts with new locales
- Updates
public/sitemap.xml with new language URLs
Step 3: Verify configuration updates
Check i18n/locale.ts:
export const locales = ["en", "ja", "zh", "ko", ...];
export const localeNames: any = {
en: "English",
ja: "ζ₯ζ¬θͺ",
zh: "δΈζ",
ko: "νκ΅μ΄",
...
};
Step 4: Add translations
Option A: Using AI translation (faster but needs review)
Option B: Manual translation (recommended for quality)
Translation best practices:
- Use native speakers when possible
- Maintain SEO keywords in target language
- Adapt content to local culture, don't just translate
Step 5: Configure SEO elements
- hreflang tags - Automatic via sitemap
- Localized meta tags - Translate in each language file
- URL structure - Verify correct format
Step 6: Validate and test
npm run build
Manual testing:
- Language switcher works
- Content displays correctly
- SEO elements are correct
Language Code Standards
Use ISO 639-1 (two-letter codes):
en - English
ja - Japanese
zh - Simplified Chinese
zh-hk - Traditional Chinese (Hong Kong)
Post-Internationalization Tasks
- Submit updated sitemap to Google Search Console
- Create separate Search Console properties for each language
- Monitor international organic traffic