Tạo translation keys cho đa ngôn ngữ từ text
import { useTranslation } from 'react-i18next';
function App() {
const { t } = useTranslation();
return <h1>{t('common.welcomeToOurWebsite')}</h1>;
}import { useTranslations } from 'next-intl';
export default function Page() {
const t = useTranslations('common');
return <h1>{t('welcomeToOurWebsite')}</h1>;
}<template>
<h1>{{ $t('common.welcomeToOurWebsite') }}</h1>
</template>Công cụ i18n Key Generator online miễn phí của Tấn Phát Digital giúp bạn tạo translation keys tự động từ text cho ứng dụng đa ngôn ngữ. Hỗ trợ nhiều naming conventions: camelCase (welcomeToOurWebsite), snake_case (welcome_to_our_website), dot.notation (welcome.to.our.website), kebab-case (welcome-to-our-website). Xuất ra nhiều formats: JSON cho react-i18next, vue-i18n, YAML cho Rails i18n, TypeScript với type safety. Hỗ trợ namespace để tổ chức keys theo module (common, auth, errors, validation). Tự động normalize text, loại bỏ ký tự đặc biệt, convert sang format phù hợp. Preview real-time khi thay đổi settings. Copy to clipboard hoặc download file trực tiếp. Hoàn toàn miễn phí, không giới hạn số lượng keys.
Khi xây dựng ứng dụng đa ngôn ngữ (internationalization - i18n), việc tạo translation keys thủ công rất tốn thời gian và dễ sai sót. Bạn phải: 1) Đọc text trong UI. 2) Nghĩ ra key name phù hợp. 3) Đảm bảo consistent với naming convention của team. 4) Format đúng syntax JSON/YAML. 5) Tránh duplicate keys. 6) Organize theo namespace hợp lý. Với hàng trăm hoặc hàng nghìn strings cần translate, công việc này trở nên overwhelming. i18n Key Generator tự động hóa toàn bộ quy trình: paste text, chọn convention, generate keys. Tool đảm bảo consistency, tránh typos, và tiết kiệm hàng giờ làm việc thủ công. Đặc biệt hữu ích khi migrate từ hardcoded strings sang i18n, hoặc khi thêm ngôn ngữ mới vào ứng dụng existing.
i18n (internationalization - 18 chữ cái giữa i và n) là quá trình thiết kế ứng dụng để dễ dàng adapt với nhiều ngôn ngữ và regions mà không cần thay đổi code. Thay vì hardcode text như 'Welcome', bạn dùng t('welcome') và define translations trong files riêng. Lợi ích: 1) Expand sang thị trường global - mỗi ngôn ngữ mới tăng 10-30% users. 2) Better UX - users prefer native language, tăng engagement và conversion. 3) SEO benefits - content đa ngôn ngữ với hreflang tăng visibility. 4) Maintainability - thay đổi text không cần touch code. 5) A/B testing - test different copies dễ dàng. 6) Compliance - một số markets yêu cầu local language (EU, Quebec). Các ứng dụng lớn như Facebook, Google, Netflix đều invest heavily vào i18n.
Chọn naming convention phù hợp với team và framework: camelCase - phổ biến trong JavaScript/TypeScript, dễ đọc, autocomplete tốt (welcomeToOurWebsite). snake_case - phổ biến trong Python, Ruby, Rails i18n (welcome_to_our_website). dot.notation - tạo nested structure tự nhiên, dễ organize (auth.login.welcome). kebab-case - ít phổ biến nhưng URL-friendly (welcome-to-our-website). Best practices: 1) Chọn một convention và stick với nó. 2) Use namespaces để group related keys (auth.*, errors.*, common.*). 3) Keys nên descriptive nhưng concise. 4) Tránh quá nested (max 3-4 levels). 5) Document convention trong README.
Có 2 approaches chính: 1) Single file per language - en.json, vi.json, ja.json. Đơn giản nhưng khó maintain khi lớn. 2) Multiple files per namespace - en/common.json, en/auth.json, vi/common.json, vi/auth.json. Scalable và dễ maintain. Recommended structure: /locales/en/common.json (shared strings), /locales/en/auth.json (login, signup), /locales/en/errors.json (error messages), /locales/en/validation.json (form validation). Với approach này, mỗi feature team có thể maintain translations riêng. Lazy load namespaces để giảm bundle size - chỉ load auth.json khi user vào trang login. Sử dụng TypeScript để type-check translation keys và tránh missing translations.
React: react-i18next - most popular, 10M+ downloads/month, hỗ trợ hooks, SSR, lazy loading. Format Message API - built-in, lightweight nhưng ít features. Next.js: next-intl - optimized cho Next.js App Router, server components, type-safe. next-i18next - cho Pages Router, wrapper của react-i18next. Vue: vue-i18n - official i18n plugin, 2M+ downloads/month, composition API support. Angular: @angular/localize - official, compile-time i18n, AOT optimization. Svelte: svelte-i18n - lightweight, reactive. React Native: react-native-localize + i18n-js. Chọn framework dựa trên: 1) Ecosystem của project. 2) Features cần thiết (pluralization, interpolation, formatting). 3) Bundle size. 4) TypeScript support. 5) Community và documentation.
1) Never hardcode strings - luôn dùng translation keys, kể cả khi chỉ support 1 ngôn ngữ ban đầu. 2) Use ICU Message Format cho pluralization và variables: {count, plural, one {# item} other {# items}}. 3) Separate content từ code - translators không cần access code. 4) Context matters - cung cấp context cho translators (where, when, why string được dùng). 5) Handle missing translations gracefully - fallback về default language, log warning. 6) Test với long strings - German thường dài hơn English 30%, UI phải responsive. 7) RTL support - Arabic, Hebrew đọc từ phải sang trái. 8) Date, number, currency formatting - dùng Intl API. 9) Lazy load translations - đừng load tất cả languages lúc init. 10) CI/CD integration - validate translations, check missing keys.
1) String concatenation - NEVER do 'Hello ' + name + '!'. Use interpolation: t('greeting', {name}). 2) Hardcoded plurals - 'You have ' + count + ' items' fails với languages có plural rules khác. Use ICU format. 3) Date formatting - new Date().toLocaleDateString() không đủ, dùng Intl.DateTimeFormat. 4) Sorting - 'a' < 'b' không đúng với tất cả languages, dùng Intl.Collator. 5) Text in images - extract text ra ngoài hoặc có multiple image versions. 6) Fixed width UI - text length varies 30-50% giữa languages. 7) Missing context - 'Close' có thể là verb (đóng) hoặc adjective (gần), cần context. 8) Assuming left-to-right - support RTL từ đầu. 9) Not testing - test với actual translations, không chỉ English. 10) Forgetting metadata - page titles, meta descriptions, alt texts cũng cần i18n.
Tùy thuộc vào team convention và framework. camelCase phổ biến nhất trong JavaScript/TypeScript ecosystem (React, Vue, Angular), dễ đọc và autocomplete tốt. snake_case phổ biến trong Python, Ruby, Rails. dot.notation tạo nested structure tự nhiên, dễ organize nhưng có thể conflict với một số frameworks. kebab-case ít phổ biến nhất. Quan trọng nhất là consistency - chọn một convention và stick với nó trong toàn bộ project.
Namespace là cách group related translation keys lại với nhau. Ví dụ: 'common' cho shared strings, 'auth' cho login/signup, 'errors' cho error messages, 'validation' cho form validation. Lợi ích: 1) Organization - dễ tìm keys. 2) Lazy loading - chỉ load namespace cần thiết. 3) Team collaboration - mỗi team maintain namespace riêng. 4) Avoid conflicts - 'title' trong 'auth' khác 'title' trong 'blog'. Syntax: t('auth.login.welcome') hoặc t('welcome', {ns: 'auth'}).
JSON: Phổ biến nhất, supported bởi tất cả frameworks, parse nhanh, nhưng không có comments và khó đọc với nested structure. YAML: Dễ đọc hơn, có comments, ít verbose, nhưng parse chậm hơn và dễ lỗi indentation. TypeScript: Type-safe, autocomplete, catch missing keys lúc compile, nhưng cần build step và không friendly với non-developers. Recommendation: JSON cho production, YAML cho config files, TypeScript nếu team toàn developers và muốn type safety.
Đừng dùng string concatenation như 'You have ' + count + ' items'. Mỗi ngôn ngữ có plural rules khác nhau - English có 2 forms (one/other), Polish có 4 forms, Arabic có 6 forms. Dùng ICU Message Format: {count, plural, one {# item} other {# items}}. react-i18next, vue-i18n, Angular i18n đều support ICU format. Framework sẽ tự động chọn form đúng dựa trên count và language rules.
Không nhất thiết. Một số strings không nên translate: 1) Brand names, product names. 2) Technical terms được accept globally (API, HTTP, JSON). 3) Code examples, command lines. 4) Proper nouns (tên người, địa danh nếu không có bản địa hóa). 5) URLs, emails (trừ khi có versions khác nhau). Tuy nhiên, nên translate: UI labels, buttons, messages, errors, help text, marketing copy, legal text. Khi không chắc, hỏi native speakers hoặc professional translators.
1) Use translation management platforms: Lokalise, Crowdin, Phrase - có UI cho translators, version control, collaboration. 2) Separate concerns - developers maintain keys, translators maintain values. 3) CI/CD validation - check missing keys, unused keys, format errors. 4) Code reviews - review translation keys như review code. 5) Documentation - document context cho mỗi key. 6) Namespaces - mỗi team/feature có namespace riêng. 7) Automated testing - test với multiple languages. 8) Fallback strategy - define rõ fallback chain (vi → en → key).
Có nhưng minimal nếu implement đúng. Bundle size tăng do translation files - mỗi language thêm 10-50KB. Giải pháp: lazy load languages, chỉ load language user chọn. Runtime overhead của t() function - negligible với modern frameworks. Initial load có thể chậm hơn 50-100ms để load translations. Optimization: 1) Code splitting - lazy load namespaces. 2) Tree shaking - remove unused translations. 3) Compression - gzip/brotli giảm 70-80% size. 4) CDN caching - cache translation files. 5) Preload default language. Với optimization đúng, impact < 100ms.
Machine translation (Google Translate, DeepL) tốt cho draft initial translations nhưng KHÔNG nên dùng trực tiếp cho production. Lý do: 1) Context - machine không hiểu context, 'Close' có thể dịch sai. 2) Tone - không giữ được brand voice và tone. 3) Cultural nuances - idioms, humor không translate được. 4) Technical terms - dịch sai thuật ngữ chuyên ngành. 5) UI constraints - không biết space limitations. Workflow đúng: 1) Machine translation cho draft. 2) Native speakers review và edit. 3) QA testing với actual users. 4) Iterate based on feedback. Đầu tư vào professional translation cho key pages (homepage, checkout, onboarding).
Chúng tôi không chỉ thiết kế website, mà còn giúp doanh nghiệp xây dựng thương hiệu số mạnh mẽ. Cung cấp dịch vụ thiết kế website trọn gói từ thiết kế đến tối ưu SEO. Hãy liên hệ ngay với Tấn Phát Digital để cùng tạo nên những giải pháp công nghệ đột phá, hiệu quả và bền vững cho doanh nghiệp của bạn tại Hồ Chí Minh.
Tạo file .env và .env.example cho dự án.
Tạo .gitignore cho Node.js, Python, Java.
Tạo mock JSON data cho API testing.
Format và phân tích API response.
Test REST API: GET, POST, PUT, DELETE.
Chuyển đổi Binary, Hex, Base32.
Mã hóa/giải mã Base64.
Chuyển đổi Decimal, Binary, Hex.
Tạo CSS box-shadow trực quan.
Tính quyền file Linux.
Kiểm tra WCAG accessibility.
Tạo bảng màu ngẫu nhiên.
