การตั้งค่า react-i18next

ยินดีต้อนรับ

ติดตั้งส่วนที่ต้องพึ่งพา

npm install i18next react-i18next
npm install i18next-browser-languagedetector i18next-http-backend

สร้าง i18n.js

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    resources: { en: { translation: {} }, tr: { translation: {} } },
    interpolation: { escapeValue: false },
  });

export default i18n;

นำเข้า i18n ใน main.jsx

import './i18n'; // must be before App
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

createRoot(document.getElementById('root')).render(
  <StrictMode><App /></StrictMode>
);

เนมสเปซ

resources: {
  en: {
    common: { save: 'Save', cancel: 'Cancel' },
    auth: { login: 'Log in', logout: 'Log out' },
  }
}

การตรวจจับภาษา

โหลดคำแปลจากโฟลเดอร์สาธารณะ

import Backend from 'i18next-http-backend';

i18n.use(Backend).init({
  backend: {
    loadPath: '/locales/{{lng}}/{{ns}}.json',
  },
});

I18nextProvider (ไม่บังคับ)

ตรวจสอบการเริ่มต้นระบบในคอมโพเนนต์

const { t, ready } = useTranslation();
if (!ready) return null;

DevTools และการจัดการคีย์ที่หายไป

i18n.init({ saveMissing: true,
  missingKeyHandler: (lng, ns, key) => console.warn('Missing:', key) });

ตรวจสอบความเข้าใจ

สรุปทบทวน

บทเรียนถัดไป