ตัวสลับภาษาและการโหลดคำแปลแบบ Lazy

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

ตัวสลับภาษาแบบง่าย

function LanguageSwitcher() {
  const { i18n } = useTranslation();
  return (
    <div>
      {['en', 'tr', 'fr'].map(lng => (
        <button
          key={lng}
          onClick={() => i18n.changeLanguage(lng)}
          style={{ fontWeight: i18n.language === lng ? 'bold' : 'normal' }}
        >
          {lng.toUpperCase()}
        </button>
      ))}
    </div>
  );
}

การจดจำภาษาที่เลือก

i18n.init({
  detection: {
    order: ['localStorage', 'navigator'],
    caches: ['localStorage'],
  },
});

เหตุผลที่ควรโหลดการแปลแบบขี้เกียจ

การกำหนดค่าแบ็กเอนด์ HTTP

import Backend from 'i18next-http-backend';

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

การเพิ่มไฟล์การแปล

public/locales/
  en/common.json
  en/auth.json
  tr/common.json
  tr/auth.json

การแสดงสถานะกำลังโหลดระหว่างเปลี่ยนภาษา

const [switching, setSwitching] = useState(false);

const change = async (lng) => {
  setSwitching(true);
  await i18n.changeLanguage(lng);
  setSwitching(false);
};

การโหลดเนมสเปซเฉพาะแบบขี้เกียจ

useEffect(() => {
  i18n.loadNamespaces('dashboard');
}, []);

CDN สำหรับไฟล์การแปล

backend: {
  loadPath: 'https://cdn.example.com/locales/{{lng}}/{{ns}}.json',
}

ภาษาท้องถิ่นใน URL

ตรวจสอบอย่างรวดเร็ว

สรุปทบทวน

จบหลักสูตร