Paano Magdagdag ng Maraming Wika sa Iyong App o Website

Para magdagdag ng maraming wika sa isang app, ilipat ang lahat ng text ng interface sa mga translation file (isa kada wika), i-load ang mga ito gamit ang i18n library, at magdagdag ng language switcher na tatandaan ang pinili. Para sa mga public page na gusto mong makita sa search, bigyan ang bawat wika ng sariling URL gaya ng /fr/ at i-link ang mga bersyon gamit ang hreflang tags. Pagkatapos, asikasuhin ang mga bahaging madalas makalimutan: petsa, numero at currency, mas mahabang text sa ilang wika, right-to-left na script, at content na naka-store sa database mo.

Mga salitang maririnig mo

• Internationalisation (i18n): paghahanda ng code para suportahan ang anumang wika — walang hard-coded na string, formatting na nakabatay sa locale, at flexible na layout. Ang "18" ay ang bilang ng letra sa pagitan ng i at n.
• Localisation (l10n): pag-aangkop ng app para sa isang partikular na wika o market, karamihan ay pagsasalin, minsan kasama rin ang currency, larawan at legal na text.
• Locale: wika at, kung gusto, rehiyon, gaya ng en-GB o pt-BR.

Gawin ang i18n nang isang beses, at ang pagdagdag ng bawat bagong wika ay magiging halos pagsasalin na lang.

Mga opsyon at trade-off

Para sa karamihan ng app, magandang base ang standard na i18n library na may translation files. Gumawa ng draft gamit ang machine o AI translation kung gusto mo, tapos ipasuri sa mga taong marunong magsalita ng wika ang mga bahaging pinakamaraming makikita ng customer.

Mga bahagi ng multilingual na app

Translation files

Sa halip na <h1>Welcome back</h1>, ang code ay may t('dashboard.welcome'), at bawat locale ay may file na may text:

{
  "dashboard": {
    "welcome": "Welcome back, {{name}}",
    "items_one": "{{count}} item",
    "items_other": "{{count}} items"
  }
}

Gumamit ng placeholder para sa mga variable sa halip na pagdugtungin ang mga fragment ng pangungusap — magkakaiba ang ayos ng salita sa bawat wika. At gamitin ang plural rules ng library: dalawa ang anyo sa English (1 item, 2 items), pero ang ilang wika ay may tatlo, apat o higit pa.

Pag-format ng petsa, numero at pera

Huwag itong i-format nang manu-mano. Ang built-in na Intl API ng browser ay nag-fo-format para sa anumang locale: ang 1,234.5 sa English ay 1.234,5 sa German; nagbabago ang petsa mula day-first patungong month-first; gumagalaw ang currency symbol. I-store ang petsa sa UTC at ang pera bilang numero na may currency code, at i-format lang para sa display.

Layout na nag-uunat

Madalas mas mahaba ang nasalin na text kaysa English — lalo na ang German at Finnish. Iwasan ang fixed-width na button at putol na label, at subukan gamit ang pinakamahabang wika mo.

Mga right-to-left na wika

Ang Arabic, Hebrew, Persian at Urdu ay binabasa mula kanan pakaliwa. Itakda ang dir="rtl" sa page para sa mga locale na iyon, at gamitin ang CSS logical properties (margin-inline-start sa halip na margin-left; sa Tailwind, ms-4 sa halip na ml-4) para ang layout mismo ang mag-mirror. Kailangan ding i-flip ang mga icon na nagpapahiwatig ng direksyon, gaya ng arrow.

Language switcher at detection

Maglagay ng switcher sa bawat page, na may label na pangalan ng bawat wika sa sarili nitong wika ("Deutsch", "Français", "العربية") sa halip na flag — kumakatawan ang flag sa bansa, hindi sa wika. Sa unang bisita, i-detect ang gustong wika ng browser para magmungkahi ng bersyon, pero dapat manaig ang tahasang pinili ng bisita at tandaan ito.

URL at SEO

Para sa mga page na gusto mong lumabas sa search results, kailangan ng sariling URL ang bawat wika. Noong Setyembre 2026, ito ang gabay ng Google para sa multilingual na site:

• Hiwalay na URL bawat wika — pinakasimple ang subdirectory (example.com/fr/); gumagana rin ang subdomain at country domain. Hindi inirerekomenda ang URL parameters (?lang=fr).
• Huwag magpalit ng wika gamit lang ang cookie o setting ng browser; baka hindi makita ng crawler ng Google ang ibang bersyon.
• Huwag mag-auto-redirect ayon sa wika; mag-link na lang sa pagitan ng mga bersyon.
• Gamitin ang hreflang para sabihin sa Google kung aling page ang pagsasalin ng alin. Dapat ilista ng bawat bersyon ang sarili at ang lahat ng iba, kung hindi ay maaaring balewalain ang annotations. Magdagdag ng x-default para sa fallback na page.
• Tinutukoy ng Google ang wika ng page mula sa nakikitang content, hindi mula sa lang o hreflang — kaya isalin ang buong page, hindi lang ang menu.

Ilagay pa rin ang <html lang="fr"> sa bawat bersyon: ginagamit ito ng screen reader para pumili ng tamang pagbigkas, at bahagi ito ng accessibility requirements.

Hindi kailangang ma-index ang mga screen ng app na naka-login, kaya para sa mga iyon, ayos lang na itago ang wika sa profile ng user. Tingnan ang SEO para sa mga website na ginawa gamit ang AI para makuha ng mga public page ang pag-crawl.

Content sa database

Nasa mga file ang interface text; ang content gaya ng pangalan ng produkto, blog post at kategorya ay nasa database. Dalawang karaniwang pattern:

• Translations table: product_translations (product_id, locale, name, description). Malinis ito at kayang sumaklaw sa maraming wika.
• JSON column bawat field: name: {"en": "...", "fr": "..."}. Mas simple ito kung kakaunti lang ang wika.

Magpasya kung ano ang mangyayari kapag may nawawalang pagsasalin — karaniwan, bumalik sa default na wika sa halip na magpakita ng blangkong espasyo.

Mga email at notification

Itago ang wika ng bawat user at gamitin ito para sa mga email, notification at PDF din. Madaling isalin ang app at makalimutang sa English pa rin dumarating ang welcome email.

Mga prompt na gumagana

Magdagdag ng internationalisation gamit ang react-i18next. Ilipat ang bawat user-visible na string sa locales/en.json na may namespaced na key, gumamit ng interpolation at plural rules sa halip na string concatenation, at i-format ang petsa, numero at presyo gamit ang Intl ayon sa kasalukuyang locale. Huwag munang baguhin ang anumang wording.

Magdagdag ng French at German. Ang mga public marketing page ay makakakuha ng /fr/ at /de/ na prefix sa URL, na may English sa root; hreflang links sa bawat page (kasama ang self-reference at x-default), at html lang na nakatakda kada page. Magdagdag ng language switcher na nagpapakita ng native na pangalan ng bawat wika. Para sa mga page na naka-login, itago ang wika sa profile ng user.

Magdagdag ng Arabic na may right-to-left na suporta: itakda ang dir="rtl" para sa Arabic, palitan ang left at right na margin at padding ng logical properties, i-mirror ang mga directional na icon, at tiyaking tama pa rin ang pagbasa ng mga form at table.

Hakbang-hakbang

1. Piliin ang unang dagdag na wika batay sa tunay na demand — kung nasaan ang mga bisita o customer mo.
2. I-internationalize ang code: ilipat ang mga string sa files, magdagdag ng plurals at Intl formatting. I-ship ito na English lang muna at tiyaking walang nagbago.
3. Magpasya sa estruktura ng URL para sa mga public page at magdagdag ng hreflang.
4. Isalin: gumawa ng draft gamit ang machine o AI translation, tapos ipasuri kasama ang taong marunong ng wika. Bigyan ang mga translator ng konteksto — ang salitang "Book" ay pangngalan sa isang screen at pandiwa sa isa pa.
5. Isalin ang content sa database at magtakda ng fallback.
6. I-localize ang iba pa: email, error message, legal na page, at mga larawang may text.
7. Subukan ang bawat wika sa lapad ng telepono, at sa right-to-left kung kailangan.
8. Mag-set up ng proseso para kasama ng bawat bagong feature ang pagsasalin, sa halip na buwan pagkatapos.

Mga karaniwang pagkakamali

• Pagdudugtong ng mga pangungusap ("You have " + n + " messages"), na nasisira sa ibang wika.
• Hard-coded na text na naiwan sa mga component, error message at validation string.
• Manu-manong pag-format ng petsa at presyo.
• Flag bilang representasyon ng wika, at auto-redirect na nagkukulong sa tao sa maling bersyon.
• Iisang URL para sa lahat ng wika sa mga page na gustong ma-index.
• Nawawalang hreflang return links, kaya binabalewala ng Google ang annotations.
• Naisalin ang interface pero hindi ang content, o kabaligtaran.
• Hindi nasuring machine translation sa pricing, legal at checkout page.

Checklist ng multilingual

• Walang hard-coded na user-visible na string; gamit ang plural rules at placeholder
• Naka-format ang petsa, numero at currency gamit ang Intl
• May language switcher na may native na pangalan sa bawat page; tanda ang pinili
• Magkahiwalay na URL kada wika para sa public page; walang pilit na redirect
• May hreflang sa bawat bersyon, kasama ang sarili at x-default
• Nakatakda ang html lang (at dir="rtl" kung kailangan) kada page
• Naisalin ang content sa database, na may maayos na fallback
• Ipinapadala ang mga email at notification sa wika ng user
• Nasuri ng taong marunong ng wika ang text na makikita ng customer

Maraming wika sa Mythex

Sa Mythex, nagdadagdag ka ng wika sa pamamagitan ng pag-chat — walang hiwalay na translation panel — kaya gumagana nang eksakto ang mga prompt sa itaas. Gawin muna ang hakbang ng internationalisation at tingnan ito sa Preview bago magdagdag ng wika; malaking refactor ito, at nagbibigay ang chat checkpoint ng puntong mababalikan kung may masira (chat at checkpoints). Kung gusto mong awtomatikong isalin ng app ang content gamit ang AI o translation API, gagamit ito ng sarili mong API key na naka-store sa project settings (environment variables at secrets); ipinapaliwanag ng paano gamitin ang LLM APIs ang mga gastos. I-publish ulit kapag handa na ang mga bagong wika.

Mga tanong