Website Internationalization (i18n) Guide: Building Multilingual Sites
Internationalization (i18n) is the technical approach for adapting websites to different languages and regions. 75% of consumers prefer buying in their native language.
Content Types to Localize
| Type | Example | Notes |
|---|---|---|
| UI Text | Buttons, menus | Basic translation |
| Dates | 2026/07/18 vs July 18, 2026 | Format differences |
| Currency | $1,000.50 vs 1.000,50€ | Symbol and format |
| Numbers | 1,234.56 vs 1.234,56 | Decimal/thousand separators |
| Images | Text in images | Prepare per language |
Implementation Options
| Solution | Framework | Features |
|---|---|---|
| react-i18next | React | Most features, SSR support |
| Vue I18n | Vue | Official recommendation |
| nuxt/i18n | Nuxt | Auto routing and SEO |
| next-i18next | Next.js | SSR and SSG integration |
react-i18next Example
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
const resources = {
'zh-CN': { translation: { welcome: '欢迎来到我们的网站' } },
'en-US': { translation: { welcome: 'Welcome to our website' } }
};
i18n.use(initReactI18next).init({ resources, lng: 'zh-CN', fallbackLng: 'en-US' });
URL Strategies
- Sub-path: example.com/zh-cn/page (best SEO, easy)
- Subdomain: zh.example.com/page (independent, complex TLS)
- Domain: example.cn/page (strongest localization, costly)
SEO
<link rel="alternate" hreflang="zh-CN" href="https://example.com/zh-cn/page" />
<link rel="alternate" hreflang="en-US" href="https://example.com/en-us/page" />
Summary
Plan i18n from project start. Choose mature libraries like react-i18next or Vue I18n. Consider translation management platforms (Lokalise, Crowdin) rather than hardcoding.