ทำเว็บหลายภาษาไม่ต้องปวดหัว! รู้จัก React i18n + i18next-scanner ตัวช่วยที่ dev ควรรู้

บทนำ

ทุกวันนี้ใครทำเว็บแล้วมีลูกค้า/ผู้ใช้หลายประเทศ จะหนีเรื่อง "แปลภาษา" หรือ multi-language support ไม่พ้นแน่นอน
ไม่ว่าจะเป็นเว็บขายของ เว็บแอป SaaS หรือเว็บภาครัฐ

แล้วถ้าใช้ React อยู่...
React i18n (โดยเฉพาะ react-i18next) คือไลบรารีตัวท็อปที่ dev ทั่วโลกเลือกใช้

🧭 React i18n คืออะไร?

ถ้าให้พูดแบบเข้าใจง่าย:

มันคือไลบรารีช่วยให้เราแยก "ข้อความใน UI" ออกมาไว้ในไฟล์แปลภาษา แล้วสลับภาษาตามที่ user ต้องการ

ตัวที่นิยมสุดใน React คือ react-i18next
มันมีฟีเจอร์ครบ ทั้ง:

• ใช้ฟังก์ชัน t() สำหรับแปลคำ
• ใช้ component <Trans> สำหรับใส่ markup
• รองรับ lazy loading, fallback, interpolation, pluralization

ตัวอย่างการใช้งานเบื้องต้น:

import { useTranslation } from 'react-i18next';

const Welcome = () => {
  const { t } = useTranslation();

  return <h1>{t('welcome_message')}</h1>;
};

😵 Pain Point ที่ dev เจอบ่อย

1. ต้องสร้าง key ในไฟล์แปลเอง
2. ลืมลบ key ที่ไม่ได้ใช้แล้ว
3. อยากเช็กว่า key ไหนยังไม่มีแปล
4. คนทำงานหลายคน เพิ่ม key ซ้ำกันเพียบ

---

🔧 แล้ว i18next-scanner มาช่วยอะไร?

มันจะ "สแกน" ไฟล์ .ts/.tsx/.js แล้วหา key ที่อยู่ใน t() กับ <Trans>
จากนั้น auto generate ไฟล์แปลภาษาให้เองเลย!

แค่รันคำสั่งเดียว:

npx i18next-scanner

⚙️ ขั้นตอนการติดตั้งและตั้งค่า

1. ติดตั้ง

npm install i18next-scanner --save-dev

2. สร้างไฟล์ i18next-scanner.config.js

module.exports = {
  input: [
    'src/**/*.{js,jsx,ts,tsx,vue}',
  ],
  output: './locales',
  options: {
    debug: false,
    removeUnusedKeys: true,
    func: {
      list: ['t'],
      extensions: ['.js', '.jsx', '.ts', '.tsx'],
    },
    trans: {
      component: 'Trans',
      i18nKey: 'i18nKey',
      extensions: ['.js', '.jsx', '.ts', '.tsx'],
    },
    lngs: ['en', 'th'],
    defaultLng: 'en',
    defaultValue: '',
    resource: {
      loadPath: 'locales/{{lng}}/{{ns}}.json',
      savePath: 'locales/{{lng}}/{{ns}}.json',
    },
  },
};

🧪 ตัวอย่าง output

{
  "hello": "",
  "welcome_message": ""
}

🧩 Advanced: เขียน customTransform สำหรับ i18next-scanner

หากคุณใช้ฟังก์ชันอื่นนอกจาก t() เช่น translate(), คุณสามารถเขียน customTransform ได้:

ตัวอย่าง:

const fs = require('fs');
const parser = require('acorn');
const walk = require('acorn-walk');

module.exports = {
  input: ['src/**/*.{js,jsx,ts,tsx}'],
  output: './locales',
  options: {
    debug: false,
    removeUnusedKeys: true,
    lngs: ['en', 'th'],
    defaultLng: 'en',
    defaultValue: '',
    resource: {
      loadPath: 'locales/{{lng}}/{{ns}}.json',
      savePath: 'locales/{{lng}}/{{ns}}.json',
    },
    customTransform: function customTransform(file, encoding, done) {
      const content = file.contents.toString(encoding);
      const ast = parser.parse(content, { ecmaVersion: 2020, sourceType: 'module' });

      walk.simple(ast, {
        CallExpression(node) {
          if (node.callee.name === 'translate' && node.arguments.length > 0) {
            const arg = node.arguments[0];
            if (arg.type === 'Literal') {
              const key = arg.value;
              this.parser.set(key, {
                defaultValue: '',
              });
            }
          }
        }
      }, null, { parser: this.parser });

      done();
    },
  },
};

✅ สรุป

• ใช้ react-i18next จัดการแปลภาษาใน React ได้แบบโปร
• ใช้ i18next-scanner ช่วยดึง key อัตโนมัติจากโค้ด
• ถ้ามีรูปแบบพิเศษก็เขียน customTransform เองได้
• ใช้งานง่าย ประหยัดเวลา เหมาะกับทีม dev ทุกระดับ

ลองใช้ แล้วคุณจะไม่อยากกลับไปจัดการไฟล์แปลเองอีกเลย 💬🌐