การรองรับหลายภาษา (Internationalization)

เพิ่มการรองรับหลายภาษาให้กับแอปของคุณ ใช้ Proyecta Content API สำหรับการแปลเนื้อหาสำหรับบรรณาธิการ หรือให้ AI เชื่อมต่อ i18n framework โดยตรงในโค้ด

Proyecta รองรับสองแนวทางที่เสริมกันสำหรับการทำ internationalization ให้กับแอปที่คุณสร้าง:

1. การแปลเนื้อหาผ่าน Proyecta Content API — สำหรับเนื้อหาสำหรับบรรณาธิการ (บทความบล็อก, FAQ, เนื้อหาการตลาด) ที่ต้องการแปลเป็นหลายภาษา
2. i18n ระดับโค้ดผ่าน translation framework — สำหรับ UI strings, วันที่, สกุลเงิน และการเปลี่ยน locale ขณะรันไทม์

ทั้งสองแนวทางใช้งานได้ในปัจจุบัน ว่าคุณต้องการแบบไหนขึ้นอยู่กับสิ่งที่คุณต้องการแปล

ตัว Proyecta Builder เองรองรับ 24 locales แล้ว ดังนั้นตัวผลิตภัณฑ์จึงเชี่ยวชาญด้าน i18n เป็นอย่างดี และ pattern เดียวกันนี้นำไปใช้กับแอปที่คุณสร้างภายในได้เลย

ตัวเลือกที่ 1: การแปลเนื้อหา (Proyecta Content API)

ถ้าคุณกำลังสร้างเว็บไซต์ที่เน้นเนื้อหา — บล็อก, ฐานความรู้, หน้าการตลาด, แคตาล็อกสินค้า — ให้ใช้การรองรับ locale ที่มีอยู่แล้วในตัว เพียงบอก AI ว่าคุณรองรับภาษาใดบ้าง ("Make the site available in English, Spanish and French") แล้วมันจะลงทะเบียนให้คุณเอง โดยมีภาษาอังกฤษเป็นค่าเริ่มต้น จากนั้นดึงเนื้อหาในภาษาของผู้เข้าชมได้เลย

ฝั่ง frontend, content hooks ที่มี type ของ template จะ resolve ฟิลด์ที่แปลแล้วให้คุณโดยอัตโนมัติ — เพียงส่ง locale ที่ผู้เข้าชมใช้งานอยู่ แล้วแต่ละฟิลด์ที่เป็น localized จะถูกส่งกลับมาเป็นค่าที่แปลแล้วค่าเดียว:

import { useCollection, useEntry } from '@/hooks/useContent';
import { useTranslation } from 'react-i18next';

function Blog({ slug }: { slug: string }) {
    const { i18n } = useTranslation();

    // List a collection in the current locale
    const { data: posts } = useCollection('posts', { locale: i18n.language });

    // Or read one entry by slug in the current locale
    const { data: post } = useEntry('posts', slug, { locale: i18n.language });

    // ...render posts / post
}

เบื้องหลัง CMS จะเดิน fallback chain — locale ที่ร้องขอ → fallback ที่กำหนดไว้ → locale เริ่มต้น — และรายงาน code ที่ใช้จริงในแต่ละ entry ผ่าน localeResolved หากไม่ระบุ locale บนเว็บไซต์ที่มีภาษาเดียว ฟิลด์จะถูกส่งกลับมาเป็นค่าดิบ

แนวทางนี้เหมาะสมเมื่อ:

• บรรณาธิการที่ไม่ได้เขียนโค้ดต้องการแปลเนื้อหา
• คุณต้องการให้การแปลสามารถทำ version ได้
• คุณต้องการการเผยแพร่เฉพาะ locale (การกำหนดเวลาเผยแพร่กำลังจะมา — ปัจจุบัน entry ต้องเผยแพร่ด้วยตนเองผ่าน API)

ดู Content Management สำหรับ Content API ฉบับเต็ม

ตัวเลือกที่ 2: i18n framework ระดับโค้ด

สำหรับ UI strings — labels, ปุ่ม, ข้อความ error, วันที่, สกุลเงิน — ให้ขอให้ AI เชื่อมต่อ i18n framework โดยตรงเข้าไปในโปรเจกต์ของคุณ:

Add internationalization to my app.
Support English, Spanish, French, and Arabic.
Add message catalogs in src/locales/.
Add a language switcher in the header.
Use locale-prefixed URLs like /en/about and /es/about.
Make sure RTL layout works correctly for Arabic.

AI จะ:

1. เลือก framework — AI จะใช้ i18next ร่วมกับ react-i18next (มาตรฐานของ Proyecta)
2. สร้าง catalog files ใน src/locales/ (JSON หนึ่งไฟล์ต่อภาษา)
3. ครอบ text ด้วย t() calls (จาก useTranslation hook ของ react-i18next)
4. เพิ่ม language switcher component
5. เชื่อมต่อ URL routing พร้อม locale prefixes
6. จัดการ RTL layouts (dir="rtl") สำหรับภาษาอาหรับ, ฮีบรู ฯลฯ
7. จัดรูปแบบตัวเลข, วันที่, และสกุลเงิน ตาม locale

แปลอัตโนมัติด้วย AI

เมื่อภาษาหลักของคุณพร้อมแล้ว AI เก่งมากในการสร้าง catalog files สำหรับภาษาอื่น ๆ:

• "Translate every string in src/locales/en.json into Spanish, French, German, and Japanese. Use natural, idiomatic phrasing — don't translate brand names."
• "My app is fully built in English. Add Spanish translations for everything and an es/ route prefix."

สำหรับเนื้อหาที่มีความสำคัญสูง (ข้อความทางกฎหมาย, การแพทย์, การเงิน) ควรให้นักแปลที่เป็นมนุษย์ตรวจสอบผลลัพธ์จาก AI ก่อน deploy

การใช้ทั้งสองแนวทางร่วมกัน

แอปจริงส่วนใหญ่ใช้ทั้งสองแนวทาง: i18n ระดับโค้ดสำหรับ UI chrome (ปุ่ม, errors, navigation) และ Content API สำหรับเนื้อหาสำหรับบรรณาธิการ (บทความ, คำอธิบายสินค้า) ทั้งสองอยู่ร่วมกันได้อย่างลงตัว — i18n framework ของคุณจัดการ catalog files ในเวลา build, ส่วน Content API จะ serve entry ที่แปลแล้วในเวลา runtime

แนวปฏิบัติที่ดี

1. เลือกภาษาหลักและทำ copy ให้สมบูรณ์ก่อน การแปลเนื้อหาที่ยังเปลี่ยนอยู่ตลอดเวลานั้นเป็นเรื่องยุ่งยาก
2. รวมการแปลเป็น batch อย่าแปลไปเรื่อย ๆ — รอจนกว่าฟีเจอร์จะ stable แล้วค่อยแปล
3. ทดสอบ RTL แต่เนิ่น ๆ หากรองรับภาษาอาหรับหรือฮีบรู บั๊กของ RTL มักซ่อนอยู่จนกว่าคุณจะลองดูจริง ๆ
4. ใส่ lang และ dir บน <html> เบราว์เซอร์และ screen readers ต้องการค่านี้
5. ใช้ Intl สำหรับการจัดรูปแบบ อย่าเขียน date หรือ currency formatting เอง — ใช้ Intl.DateTimeFormat, Intl.NumberFormat

เร็ว ๆ นี้

• UI สำหรับจัดการ locale ใน Builder — เลือก locale, ดู translation coverage, แก้ไข catalogs โดยไม่ต้องออกจาก Proyecta
• แปลอัตโนมัติเมื่อบันทึก สำหรับ strings ใหม่
• project templates ที่พร้อมใช้งาน i18n โดยมี framework เชื่อมต่อไว้ล่วงหน้า