โซลูชันที่ดีที่สุดสำหรับการทำให้รองรับหลายภาษาสากล (i18n) ในแอป React

มันทำงานอย่างไร

ติดตั้งแพ็กเกจ TacoTranslate ผ่านทาง npm:

npm install tacotranslate

เมื่อคุณติดตั้งโมดูลเรียบร้อยแล้ว คุณจะต้องสร้างบัญชี TacoTranslate โปรเจกต์แปลภาษา และกุญแจ API ที่เกี่ยวข้อง สร้างบัญชีที่นี่ ฟรี และ ไม่จำเป็นต้องเพิ่มบัตรเครดิต

ภายในอินเทอร์เฟซของแอปพลิเคชัน TacoTranslate สร้างโปรเจกต์หนึ่ง แล้วไปที่แท็บ API keys ของโปรเจกต์นั้น สร้างคีย์ read หนึ่งชุด และคีย์ read/write หนึ่งชุด เราจะบันทึกคีย์เหล่านี้เป็นตัวแปรสิ่งแวดล้อม คีย์ read คือสิ่งที่เราเรียกว่า public และคีย์ read/write คือ secret ตัวอย่างเช่น คุณสามารถเพิ่มคีย์เหล่านี้ในไฟล์ .env ที่อยู่ในโฟลเดอร์รากของโปรเจกต์ของคุณได้

คุณยังจำเป็นต้องเพิ่มตัวแปรแวดล้อมอีกสองตัว: TACOTRANSLATE_DEFAULT_LOCALE และ TACOTRANSLATE_ORIGIN

• TACOTRANSLATE_DEFAULT_LOCALE: รหัสภาษาตั้งต้นที่ใช้เมื่อไม่มีการระบุภาษาอื่น ในตัวอย่างนี้ เราจะตั้งค่าเป็น en สำหรับภาษาอังกฤษ
• TACOTRANSLATE_ORIGIN: “โฟลเดอร์” ที่จะเก็บข้อความของคุณ เช่น URL ของเว็บไซต์ของคุณ อ่านเพิ่มเติมเกี่ยวกับ origins ได้ที่นี่

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

โปรดระวังอย่าให้ read/write API key ที่เป็นความลับรั่วไหลไปสู่สภาพแวดล้อมของลูกค้าฝั่ง production

การตั้งค่า TacoTranslate

เริ่มต้นใช้งาน TacoTranslate ในแอป React ของคุณโดยการห่อหุ้มแอปพลิเคชันของคุณด้วยผู้ให้บริการบริบท TacoTranslate:

import React, {useState} from 'react';
import TacoTranslate, {Translate} from 'tacotranslate/react';

const tacoTranslate = createTacoTranslateClient({
	apiKey: 'YOUR_API_KEY',
});

export default function App() {
	const [locale, setLocale] = useState('en');

	return (
		<TacoTranslate client={tacoTranslate} locale={locale}>
			<Translate string="Hello, world!"/>
		</TacoTranslate>
	);
}

คุณสามารถใช้คอมโพเนนต์ Translate ได้ทุกที่ภายในแอปพลิเคชันของคุณเพื่อแสดงข้อความที่แปลแล้ว! อย่าลืมตรวจสอบ เอกสารของเรา สำหรับข้อมูลเพิ่มเติมและคู่มือการใช้งานที่เหมาะกับการตั้งค่าของคุณโดยเฉพาะ

import {Translate} from 'tacotranslate/react';

export default async function Component() {
	return (
		<Translate string="Hello? This is TacoTranslate speaking." />
	);
}

ประโยชน์ของการใช้ TacoTranslate

• ประหยัดเวลา: ทำให้กระบวนการแปลภาษาและการเก็บรวบรวมข้อความที่น่าเบื่อเป็นอัตโนมัติ ช่วยประหยัดเวลาที่มีค่าให้กับคุณ
• คุ้มค่า: ลดความจำเป็นในการแปลด้วยมือ ลดต้นทุนการแปลของคุณ
• ความแม่นยำที่ดีขึ้น: การแปลที่ขับเคลื่อนด้วย AI ช่วยให้ได้ผลลัพธ์ที่แม่นยำตามบริบทและมีคุณภาพสูง
• โซลูชันที่ขยายตัวได้: เพิ่มการรองรับภาษาต่าง ๆ ได้อย่างง่ายดาย เมื่อแอปพลิเคชันและฐานลูกค้าของคุณเติบโตขึ้น

เริ่มต้นวันนี้เลย!

แอป React ของคุณจะถูกแปลโดยอัตโนมัติเมื่อคุณเพิ่มสตริงใด ๆ ลงในคอมโพเนนต์ Translate. โปรดทราบว่าเฉพาะสภาพแวดล้อมที่มีสิทธิ์ read/write บน API key เท่านั้นที่จะสามารถสร้างสตริงใหม่เพื่อแปลได้

เราแนะนำให้มีสภาพแวดล้อม staging ที่ปิดและปลอดภัยซึ่งคุณสามารถทดสอบแอปโปรดักชันของคุณได้โดยการเพิ่มสตริงใหม่ก่อนเปิดใช้งานจริง ซึ่งจะช่วยป้องกันไม่ให้ใครแอบขโมย API key ลับของคุณ และป้องกันไม่ให้โปรเจกต์แปลของคุณล้นด้วยสตริงที่ไม่พึงประสงค์

อย่าลืม ดูตัวอย่างทั้งหมด ได้ที่โปรไฟล์ GitHub ของเรา หากคุณพบปัญหาใด ๆ สามารถ ติดต่อเรา ได้เลย เรายินดีช่วยเหลืออย่างยิ่ง

TacoTranslate ช่วยให้คุณแปลแอปพลิเคชัน React ของคุณโดยอัตโนมัติได้อย่างรวดเร็วในทุกภาษา แปลฟรี!