Hello/สวัสดี i18n สร้างเว็บรองรับหลายภาษาบน React

 สวัสดีครับผมแมกซ์นะครับ อากาศเย็นซะงั้นหรือผมรู้สึกไปเอง เหมือนจะไม่สบาย วันนี้มานำเสนอเครื่องมือช่วยในการสร้างและจัดการภาษาภายในเว็บ ซึ่งเป็นสิ่งสำคัญอย่างหนึ่ง ในตอนแรกผมสร้างเว็บแอพ โดยทั้งหมดใช้ภาษาอังกฤษ และมาลองคิดทบทวน ถามผู้ใช้อีกที สิ่งที่เค้าต้องการคือภาษาไทยสิ !เข้าใจง่าย ตรงไปตรงมา เราทำให้ผู้ใช้คือคนไทย งั้นก็เปลี่ยนทำเป็นไทยเลยไหม แต่สิ่งที่อยากได้ด้วยคือความสากล จึงเป็นที่มาของการใช้แนวคิด i18n เว็บรองรับหลายภาษา

i18n ??? หลายคนอาจจะผ่านตามาบ้าง i18n เนี่ยมันมาจาก Internationalization ยังไงหน่ะหรอก็เริ่มด้วย i จบด้วย n ตรงกลางมี 18 ตัวอักษรเลยกลายเป็น i18n ยังมี l10n มาจาก Localization หรือ k8s มาจาก Kubernetes แบบนี้ก็ได้หรอ !

เอา Console ลองนับ เออหว่ะ 555+ เพื่อ เดี๋ยวมือคนไปลองนับจะเหนื่อยเปล่า

i18next/react-i18next

react-i18next — Internationalization for react done right. Using the i18next i18n ecosystem.

github.com

react-i18next คือ internationalization addon ที่ใช้งานได้กับ React โดยในการเขียนโค้ดจะต่างจากเดิมนิดเดียวตัวอย่าง

<div>Just simple content</div>

หลังจากใช้ react-i18next โค้ดจะเป็นลักษณะนี้

<div>{t('simpleContent')}</div>

คือเปลี่ยนจากใช้ค่าตรงๆ เป็นการเรียกฟังก์ชั่นแล้วโยนพารามิเตอร์เป็น Key ของคำนั่นไปแทน เพื่อแสดงผลตามภาษาที่เราเลือกขณะนั้น ซึ่งสิ่งที่เราต้องเตรียมการดังนี้

เริ่มด้วยติดตั้ง react-i18next ไปที่โปรเจคของเพื่อนๆก่อน

# npm
$ npm install react-i18next --save

ไฟล์ที่ต้องสร้างเพิ่มเติม หรือ แก้ไข

my-app
├── locales
│   ├── en
│       └── translations.json
│   ├── th
│       └── translations.json
└── src
    └── i18n.js
    └── index.js

• ไฟล์ translations.json ใน locales

{
  "title": "Welcome to react using react-i18next",
  "description": {
    "part1": "This is part 1.",
    "part2": "This is part 2."
  }
}

ไฟล์ json ที่เก็บ key และ value ไว้ทั้งสองไฟล์ภาษามี key เหมือนกัน ต่างที่ value

{
  "title": "ยินดีต้อนรับเข้าสู่การใช้ react-i18next บน react ",
  "description": {
    "part1": "นี่คือส่วนที่ 1",
    "part2": "นี่คือส่วนที่ 2"
  }
}

• ไฟล์ i18n.js ใน src ตัว instance ไว้กำหนดตั้งค่า

import i18n from 'i18next';
import Backend from 'i18next-xhr-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
import { reactI18nextModule } from 'react-i18next';i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(reactI18nextModule)
  .init({
    fallbackLng: 'en',    // have a common namespace used around the full app
    ns: ['translations'],
    defaultNS: 'translations',    debug: true,    interpolation: {
      escapeValue: false, // not needed for react!!
    },    react: {
      wait: true
    }
  });
export default i18n;

i18next instance · react-i18next documentation

import i18n from ‘i18next’; import XHR from ‘i18next-xhr-backend’; import LanguageDetector from ‘i18next-browser…

react.i18next.com

• ไฟล์ index.js ใน src

import './i18n';

เพิ่ม import instance เมื่อสักครู่เข้าไปด้วยเพียงเท่านั้น

• ไฟล์ Component ของเราทุกไฟล์ถ้าต้องการให้รองรับการแสดงผลหลายภาษาต้องทำดังนี้

Import ตัว translate ไว้ใช้ในการ Export class นี้

import { translate } from "react-i18next";

เปลี่ยนการ Export ตัวเก่าเป็นผ่านตัว translate

// short for only loading one namespace:export default translate("translations")(Login);

ใน render() ทำการแกะของจาก props และสร้างตัวแปรฟังก์ชั่นสลับภาษาไว้ใช้

render() {
  const { t, i18n } = this.props;
  
  const switchingLanguage = () => {
    if (i18n.language === "en") {
      i18n.changeLanguage("th");
    } else {
      i18n.changeLanguage("en");
    }
  };return(
  <div>
  //...
  </div>
  );
}

เมื่อทุกอย่างพร้อมแล้ว Component นี้ก็จะสามารถรองรับหลายภาษาได้แล้วโดยเรียก t ฟังก์ชั่นโยน key เป็น title เข้าไป

<div> {t('title')} </div>

การสลับภาษาสามารถเรียกใช้ switchingLanguage() ที่เราสร้างไว้ได้เลย ตัวอย่างมี ตัวหนังสือ EN/TH ไว้เมื่อกดภาษาก็จะสลับภาษาไปมา

<a onClick={() => switchingLanguage("en")}>{t("label.enth")}</a>

ก็จะได้ของหน้าตาแบบนี้ เว็บสองภาษาคลูๆไป

จบอ่าา หวังเพื่อนๆจะอย่าง งง 55 ถ้าอ่านและทำตามเอาเป็นว่าได้เป็นไอเดีย ให้คนที่แวะเข้ามาดูว่ามันทำได้แบบนี้ละกันนะครับ ไม่ได้ลงรายละเอียดเพราะมันมีเยอะกว่านี้อีกนะเออ ทำได้มากกว่านี้ บั๊บบายไปหล่ะครับ ก่อนจากมีลิ้งให้ไปต่อถ้าสนใจ

Source : https://medium.com/@themaxaboy/hello-%E0%B8%AA%E0%B8%A7%E0%B8%B1%E0%B8%AA%E0%B8%94%E0%B8%B5-i18n-%E0%B8%AA%E0%B8%A3%E0%B9%89%E0%B8%B2%E0%B8%87%E0%B9%80%E0%B8%A7%E0%B9%87%E0%B8%9A%E0%B8%A3%E0%B8%AD%E0%B8%87%E0%B8%A3%E0%B8%B1%E0%B8%9A%E0%B8%AB%E0%B8%A5%E0%B8%B2%E0%B8%A2%E0%B8%A0%E0%B8%B2%E0%B8%A9%E0%B8%B2%E0%B8%9A%E0%B8%99-react-a491cfb7fc16