โซลูชันที่ดีที่สุดสำหรับการทำให้รองรับหลายภาษา (i18n) ในแอป Next.js
คุณกำลังมองหาวิธีขยายแอปพลิเคชัน Next.js ของคุณไปยังตลาดใหม่ๆ อยู่หรือไม่? TacoTranslate ช่วยให้การทำให้โปรเจกต์ Next.js ของคุณรองรับหลายภาษาเป็นเรื่องง่ายอย่างไม่น่าเชื่อ ทำให้คุณสามารถเข้าถึงผู้ชมทั่วโลกได้โดยไม่ยุ่งยาก
ทำไมถึงควรเลือกใช้ TacoTranslate สำหรับ Next.js?
- การรวมระบบอย่างไร้รอยต่อ: ออกแบบมาเฉพาะสำหรับแอปพลิเคชัน Next.js, TacoTranslate ผสานรวมได้อย่างง่ายดายในเวิร์กโฟลว์ที่คุณมีอยู่แล้ว
- การเก็บรวบรวมสตริงอัตโนมัติ: ไม่ต้องจัดการไฟล์ JSON ด้วยตนเองอีกต่อไป TacoTranslate จะเก็บรวบรวมสตริงจากฐานโค้ดของคุณโดยอัตโนมัติ
- การแปลด้วยพลังของ AI: ใช้ประโยชน์จากพลังของ AI เพื่อให้การแปลที่ถูกต้องตามบริบทและเหมาะสมกับโทนของแอปพลิเคชันของคุณ
- รองรับภาษาทันที: เพิ่มการรองรับภาษาที่ใหม่ได้ง่ายเพียงคลิกเดียว ทำให้แอปพลิเคชันของคุณเข้าถึงได้ในระดับโลก
วิธีการทำงาน
เมื่โลกมีการเชื่อมต่อกันมากขึ้น ความสำคัญของการพัฒนาเว็บแอปพลิเคชันที่รองรับผู้ใช้จากประเทศและวัฒนธรรมที่หลากหลายก็เพิ่มมากขึ้น หนึ่งในวิธีสำคัญในการทำเช่นนี้คือการทำใหแอปสามารถรองรับการใช้งานหลายภาษา (internationalization หรือ i18n) ซึ่งช่วยให้คุณปรับแอปพลิเคชันของคุณให้เหมาะกับภาษาต่าง ๆ สกุลเงิน และรูปแบบวันที่ที่แตกต่างกัน
ในบทเรียนนี้ เราจะมาเรียนรู้วิธีการเพิ่มการใช้งานหลายภาษาลงในแอป React Next.js ของคุณ พร้อมกับการเรนเดอร์ฝั่งเซิร์ฟเวอร์ TL;DR: ดูตัวอย่างฉบับเต็มที่นี่
คำแนะนำนี้สำหรับแอปพลิเคชัน Next.js ที่กำลังใช้ Pages Router.
หากคุณกำลังใช้ App Router, โปรดดูคำแนะนำนี้แทน.
ขั้นตอนที่ 1: ติดตั้งไลบรารี i18n
ในการใช้งานการทำให้รองรับหลายภาษา (internationalization) ในแอป Next.js ของคุณ เราจะเริ่มต้นด้วยการเลือกไลบรารีสำหรับ i18n ก่อน มีไลบรารียอดนิยมหลายตัว รวมถึง next-intl อย่างไรก็ตาม ในตัวอย่างนี้ เราจะใช้ TacoTranslate
TacoTranslate จะแปลสตริงของคุณโดยอัตโนมัติเป็นทุกภาษาโดยใช้ AI ที่ล้ำสมัย และช่วยคุณหลีกเลี่ยงจากการจัดการไฟล์ JSON ที่น่าเบื่อ
มาติดตั้งกันโดยใช้ npm ในเทอร์มินัลของคุณ:
npm install tacotranslate
ขั้นตอนที่ 2: สร้างบัญชี TacoTranslate ฟรี
ตอนนี้คุณได้ติดตั้งโมดูลเรียบร้อยแล้ว ถึงเวลาที่จะสร้างบัญชี TacoTranslate ของคุณ โครงการแปล และกุญแจ API ที่เกี่ยวข้อง สร้างบัญชีที่นี่ ฟรี และ ไม่จำเป็นต้องใช้บัตรเครดิต
ภายในส่วนติดต่อผู้ใช้ของแอปพลิเคชัน TacoTranslate ให้สร้างโปรเจ็กต์ และไปที่แท็บ API keys ของโปรเจ็กต์นั้น สร้างคีย์หนึ่งอันเป็น read
และอีกคีย์หนึ่งเป็น read/write
เราจะบันทึกคีย์เหล่านี้เป็นตัวแปรสภาพแวดล้อม คีย์ read
คือสิ่งที่เราเรียกว่า public
และคีย์ read/write
คือ secret
ตัวอย่างเช่น คุณสามารถเพิ่มคีย์เหล่านี้ในไฟล์ .env
ที่อยู่ในโฟลเดอร์รากของโปรเจ็กต์ของคุณได้
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
โปรดระวังอย่าให้ read/write
API key ที่เป็นความลับรั่วไหลไปยังสภาพแวดล้อม production ฝั่ง client
นอกจากนี้ เราจะเพิ่มตัวแปรแวดล้อมอีกสองตัว: TACOTRANSLATE_DEFAULT_LOCALE
และ TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: รหัสภาษาตั้งต้นที่ใช้เมื่อต้องย้อนกลับ ในตัวอย่างนี้ เราจะตั้งค่าเป็นen
สำหรับภาษาอังกฤษTACOTRANSLATE_ORIGIN
: “โฟลเดอร์” ที่จะเก็บข้อความของคุณ เช่น URL ของเว็บไซต์ของคุณ อ่านข้อมูลเพิ่มเติมเกี่ยวกับ origins ที่นี่
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
ขั้นตอนที่ 3: การตั้งค่า TacoTranslate
ในการรวม TacoTranslate เข้ากับแอปพลิเคชันของคุณ คุณจะต้องสร้าง client โดยใช้คีย์ API ที่ได้กล่าวถึงก่อนหน้านี้ ตัวอย่างเช่น สร้างไฟล์ชื่อ /tacotranslate-client.js
.
const {default: createTacoTranslateClient} = require('tacotranslate');
const tacoTranslate = createTacoTranslateClient({
apiKey:
process.env.TACOTRANSLATE_SECRET_API_KEY ??
process.env.TACOTRANSLATE_PUBLIC_API_KEY ??
process.env.TACOTRANSLATE_API_KEY ??
'',
projectLocale: process.env.TACOTRANSLATE_DEFAULT_LOCALE ?? '',
});
module.exports = tacoTranslate;
เราจะกำหนด TACOTRANSLATE_API_KEY
โดยอัตโนมัติในไม่ช้า
การสร้าง client ในไฟล์แยกต่างหากทำให้ใช้งานซ้ำได้ง่ายขึ้นในภายหลัง ตอนนี้ โดยใช้ /pages/_app.tsx
แบบกำหนดเอง เราจะเพิ่ม provider TacoTranslate
import React from 'react';
import {type AppProps} from 'next/app';
import {type Origin, type Locale, type Localizations} from 'tacotranslate';
import TacoTranslate from 'tacotranslate/react';
import TacoTranslateHead from 'tacotranslate/next/head';
import tacoTranslate from '../tacotranslate-client';
type PageProperties = {
origin: Origin;
locale: Locale;
locales: Locale[];
localizations: Localizations;
};
export default function App({Component, pageProps}: AppProps<PageProperties>) {
const {origin, locale, locales, localizations} = pageProps;
return (
<TacoTranslate
client={tacoTranslate}
origin={origin}
locale={locale}
localizations={localizations}
>
<TacoTranslateHead rootUrl="https://your-website.com" locales={locales} />
<Component {...pageProps} />
</TacoTranslate>
);
}
หากคุณมี pageProps
และ _app.tsx
แบบกำหนดเองอยู่แล้ว กรุณาขยายคำจำกัดความด้วยคุณสมบัติและโค้ดจากด้านบนนี้
ขั้นตอนที่ 4: การใช้งานการเรนเดอร์ฝั่งเซิร์ฟเวอร์
TacoTranslate อนุญาตให้มีการเรนเดอร์ฝั่งเซิร์ฟเวอร์สำหรับการแปลของคุณ ซึ่งช่วยปรับปรุงประสบการณ์ผู้ใช้เป็นอย่างมากโดยการแสดงเนื้อหาที่แปลแล้วทันที แทนที่จะให้เห็นเนื้อหาที่ยังไม่ได้แปลก่อน นอกจากนี้ เรายังสามารถข้ามการร้องขอเครือข่ายที่ฝั่งไคลเอนต์ได้ เพราะเรามีการแปลทั้งหมดที่ต้องการแล้ว
เราจะเริ่มต้นโดยการสร้างหรือแก้ไข /next.config.js
.
const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslateClient = require('./tacotranslate-client');
module.exports = async () => {
const config = {};
return withTacoTranslate(config, {
client: tacoTranslateClient,
isProduction:
process.env.TACOTRANSLATE_ENV === 'production' ||
process.env.VERCEL_ENV === 'production' ||
(!(process.env.TACOTRANSLATE_ENV || process.env.VERCEL_ENV) &&
process.env.NODE_ENV === 'production'),
});
};
แก้ไขการตรวจสอบ isProduction
ให้เหมาะกับการตั้งค่าของคุณ หาก true
TacoTranslate จะแสดงคีย์ API สาธารณะ หากเราอยู่ในสภาพแวดล้อมในเครื่อง ทดสอบ หรือการแสดงละคร (isProduction
is false
) เราจะใช้คีย์ API read/write
ลับเพื่อให้แน่ใจว่ามีการส่งสตริงใหม่เพื่อการแปล
จนถึงตอนนี้ เราได้ตั้งค่าแอป Next.js ของคุณด้วยรายการภาษาที่รองรับเท่านั้น ขั้นตอนต่อไปคือการดึงคำแปลสำหรับทุกหน้าของคุณ เพื่อทำเช่นนั้น คุณจะใช้ getTacoTranslateStaticProps
หรือ getTacoTranslateServerSideProps
ขึ้นอยู่กับความต้องการของคุณ
ฟังก์ชันเหล่านี้รับอาร์กิวเมนต์สามตัว: วัตถุ Next.js Static Props Context, การกำหนดค่าสำหรับ TacoTranslate และคุณสมบัติ Next.js ที่เป็นทางเลือก โปรดทราบว่า revalidate
บน getTacoTranslateStaticProps
ถูกตั้งค่าเป็น 60 โดยค่าเริ่มต้น เพื่อให้การแปลของคุณทันสมัยอยู่เสมอ
ในการใช้ฟังก์ชันใดฟังก์ชันหนึ่งในหน้า สมมติว่าคุณมีไฟล์หน้าที่ชื่อ /pages/hello-world.tsx
.
import {Translate} from 'tacotranslate/react';
import getTacoTranslateStaticProps from 'tacotranslate/next/get-static-props';
import tacoTranslateClient from '../tacotranslate-client';
export async function getStaticProps(context) {
return getTacoTranslateStaticProps(context, {client: tacoTranslateClient});
}
export default function Page() {
return <Translate string="Hello, world!"/>;
}
ตอนนี้คุณควรจะสามารถใช้คอมโพเนนต์ Translate
เพื่อแปลสตริงภายในคอมโพเนนต์ React ทั้งหมดของคุณได้แล้ว
import {Translate} from 'tacotranslate/react';
function Component() {
return <Translate string="Hello, world!"/>
}
ขั้นตอนที่ 5: นำขึ้นใช้งานและทดสอบ!
เราเสร็จเรียบร้อยแล้ว! แอปพลิเคชัน Next.js ของคุณจะถูกแปลโดยอัตโนมัติเมื่อคุณเพิ่มข้อความใด ๆ ลงในคอมโพเนนต์ Translate
. โปรดทราบว่าเฉพาะสภาพแวดล้อมที่มีสิทธิ์ read/write
บนคีย์ API เท่านั้นที่จะสามารถสร้างข้อความใหม่เพื่อแปลได้ เราแนะนำให้มีสภาพแวดล้อม staging ที่ปิดและปลอดภัยเพื่อให้คุณสามารถทดสอบแอปพลิเคชัน production ของคุณด้วยคีย์ API แบบนั้น โดยเพิ่มข้อความใหม่ก่อนเปิดใช้งานจริง วิธีนี้จะป้องกันไม่ให้ใครขโมยคีย์ API ลับของคุณ และป้องกันไม่ให้โปรเจกต์แปลของคุณบวมขึ้นโดยการเพิ่มข้อความใหม่ที่ไม่เกี่ยวข้อง
Be sure to check out the complete example over at our GitHub profile. There, you’ll also find an example of how to do this using the App Router! If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.
TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Get started today!