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

คุณกำลังมองหาวิธีขยายแอป React ของคุณสู่ตลาดใหม่อยู่หรือไม่? TacoTranslate ช่วยให้การแปลแอป React ของคุณเป็นเรื่องง่ายอย่างไม่น่าเชื่อ ทำให้คุณเข้าถึงผู้ชมทั่วโลกได้โดยไม่ยุ่งยาก

ทำไมต้องเลือก TacoTranslate สำหรับ React?

การผสานรวมที่ไร้รอยต่อ: ออกแบบมาโดยเฉพาะสำหรับแอปพลิเคชัน React, TacoTranslate ผสานรวมได้อย่างง่ายดายในกระบวนการทำงานที่มีอยู่แล้วของคุณ
การเก็บรวบรวมสตริงอัตโนมัติ: หมดปัญหาการจัดการไฟล์ JSON ด้วยตนเอง TacoTranslate จะเก็บรวบรวมสตริงจากโค้ดของคุณโดยอัตโนมัติ
การแปลด้วย AI: ใช้ประโยชน์จากพลังของ AI เพื่อให้การแปลที่ถูกต้องตามบริบทและเหมาะสมกับโทนของแอปพลิเคชันของคุณ
รองรับภาษาใหม่ทันที: เพิ่มการรองรับภาษาที่ต้องการด้วยการคลิกเพียงครั้งเดียว ทำให้แอปพลิเคชันของคุณเข้าถึงได้ทั่วโลก

วิธีการทำงาน

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

npm install tacotranslate

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

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

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

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

.env

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

โปรดระวังอย่าเปิดเผยคีย์ API ลับ read/write ในสภาพแวดล้อมการผลิตฝั่งไคลเอนต์เด็ดขาด

การตั้งค่า 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 เท่านั้นที่จะสามารถสร้างสตริงใหม่เพื่อแปลได้

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