Reacti18n (internationalization) là kỹ thuật giúp app hỗ trợ nhiều ngôn ngữ. Cách làm:
- Tách tất cả text ra file JSON theo ngôn ngữ (vi.json, en.json), không hardcode text trong component
- Dùng thư viện react-i18next hoặc next-intl (cho Next.js) — gọi
t('greeting')thay vì viết 'Xin chào' trực tiếp
- Lazy load file ngôn ngữ để không tải hết cùng lúc
- Dùng Intl API có sẵn trong browser để format ngày tháng, số, tiền tệ theo locale
- Next.js hỗ trợ routing theo locale:
/en/about,/vi/aboutqua middleware
next-intl hiện là lựa chọn phổ biến nhất cho Next.js App Router.
i18n (internationalization) is the practice of making an app support multiple languages.
Approach:
- Extract all text into language JSON files (vi.json, en.json) — no hardcoded strings in components.
- Use react-i18next or next-intl (for Next.js) — call
t('greeting')instead of writing text directly. - Lazy-load language files to avoid loading all languages upfront.
- Use the built-in browser Intl API to format dates, numbers, and currency per locale.
- Next.js supports locale-based routing:
/en/about,/vi/aboutvia middleware. next-intl is currently the most popular choice for Next.js App Router