วิธีการใช้งานการแปลภาษาในแอปพลิเคชัน Next.js ที่ใช้ Pages Router
ทำให้แอปพลิเคชัน React ของคุณเข้าถึงได้มากขึ้นและขยายตลาดใหม่ด้วยการทำให้รองรับการใช้งานระหว่างประเทศ (i18n)
เมื่อโลกมีความเป็นสากลมากขึ้น การพัฒนาเว็บที่สามารถรองรับผู้ใช้จากประเทศและวัฒนธรรมที่หลากหลายจึงมีความสำคัญยิ่งขึ้น วิธีหลักวิธีหนึ่งในการทำให้เป็นไปได้คือการทำให้แอปพลิเคชันรองรับการใช้งานหลายภาษา (internationalization หรือ i18n) ซึ่งช่วยให้คุณปรับแอปของคุณให้เข้ากับภาษา สกุลเงิน และรูปแบบวันที่ต่าง ๆ ได้
ในบทเรียนนี้ เราจะสำรวจวิธีการเพิ่ม internationalization ให้กับแอป React Next.js ของคุณ พร้อมกับการเรนเดอร์ฝั่งเซิร์ฟเวอร์ TL;DR: ดูตัวอย่างเต็มได้ที่นี่.
คำแนะนำนี้สำหรับแอป Next.js ที่ใช้ Pages Router.
หากคุณกำลังใช้ App Router, โปรดดูคำแนะนำนี้แทน.
ขั้นตอนที่ 1: ติดตั้งไลบรารี i18n
ในการนำฟีเจอร์ i18n ไปใช้ในแอป Next.js ของคุณ เราจะเริ่มด้วยการเลือกไลบรารี i18n มีไลบรารียอดนิยมหลายตัว รวมถึง next-intl. อย่างไรก็ตาม ในตัวอย่างนี้ เราจะใช้ TacoTranslate.
TacoTranslate จะแปลสตริงของคุณเป็นทุกภาษาโดยอัตโนมัติด้วย AI ที่ทันสมัย และช่วยให้คุณไม่ต้องมาจัดการไฟล์ JSON ที่น่าเบื่ออีกต่อไป.
มาติดตั้งโดยใช้ npm ในเทอร์มินัลของคุณ:
npm install tacotranslate
ขั้นตอนที่ 2: สร้างบัญชี TacoTranslate ฟรี
ตอนนี้คุณได้ติดตั้งโมดูลเรียบร้อยแล้ว ถึงเวลาสร้างบัญชี TacoTranslate ของคุณ โปรเจกต์แปลภาษา และคีย์ API ที่เกี่ยวข้อง สร้างบัญชีที่นี่ ฟรี และ ไม่ต้องใช้บัตรเครดิต
ภายในอินเทอร์เฟซของแอปพลิเคชัน TacoTranslate ให้สร้างโปรเจกต์ แล้วไปที่แท็บ API keys ของโปรเจกต์นั้น สร้าง read
key หนึ่งตัว และ read/write
key หนึ่งตัว จากนั้นเราจะบันทึกเป็น environment variables โดยที่ read
key คือสิ่งที่เราเรียกว่า public
และ read/write
key คือ secret
ตัวอย่างเช่น คุณอาจเพิ่มลงในไฟล์ .env
ที่อยู่ในโฟลเดอร์ root ของโปรเจกต์ของคุณได้
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
อย่าปล่อยให้คีย์ API ลับ read/write
รั่วไหลไปยังสภาพแวดล้อมการผลิตฝั่งไคลเอนต์
เราจะเพิ่มตัวแปรสภาพแวดล้อมอีกสองตัวด้วย: TACOTRANSLATE_DEFAULT_LOCALE
และ TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: รหัส locale สำรองเริ่มต้น ในตัวอย่างนี้ เราจะตั้งเป็นen
สำหรับภาษาอังกฤษ.TACOTRANSLATE_ORIGIN
: “โฟลเดอร์” ที่จะเก็บสตริงของคุณ เช่น URL ของเว็บไซต์ของคุณ. อ่านเพิ่มเติมเกี่ยวกับ origins ได้ที่นี่.
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
ขั้นตอนที่ 3: การตั้งค่า TacoTranslate
ในการผนวก TacoTranslate เข้ากับแอปพลิเคชันของคุณ คุณจะต้องสร้างไคลเอนต์โดยใช้คีย์ 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
ให้โดยอัตโนมัติในไม่ช้า.
การสร้างไคลเอนต์ในไฟล์แยกจะทำให้ใช้งานซ้ำได้ง่ายขึ้นในภายหลัง ตอนนี้ โดยใช้ไฟล์ /pages/_app.tsx
แบบกำหนดเอง เราจะเพิ่มโปรไวเดอร์ 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: ปรับใช้และทดสอบ!
เรียบร้อยแล้ว! แอป React ของคุณจะถูกแปลโดยอัตโนมัติเมื่อคุณเพิ่มสตริงใดๆ ลงใน Translate
คอมโพเนนต์ โปรดทราบว่าเฉพาะสภาพแวดล้อมที่มีสิทธิ์ read/write
บนคีย์ API เท่านั้นที่จะสามารถสร้างสตริงใหม่เพื่อให้แปลได้ เราแนะนำให้มีสภาพแวดล้อมสเตจจิ้งที่ปิดและปลอดภัย ซึ่งคุณสามารถทดสอบแอปโปรดักชันของคุณด้วยคีย์ API ประเภทนั้น โดยเพิ่มสตริงใหม่ก่อนที่จะเผยแพร่จริง วิธีนี้จะช่วยป้องกันไม่ให้ใครก็ตาม ใครก็ตาม ขโมยคีย์ API ลับของคุณ และอาจทำให้โปรเจกต์การแปลของคุณบวมขึ้นจากการเพิ่มสตริงใหม่ที่ไม่เกี่ยวข้อง
อย่าลืม ดูตัวอย่างฉบับสมบูรณ์ ในโปรไฟล์ GitHub ของเรา ที่นั่นคุณจะพบตัวอย่างการทำนี้ด้วย App Router! หากคุณประสบปัญหาใด ๆ โปรด ติดต่อเรา ได้เลย เรายินดีเป็นอย่างยิ่งที่จะช่วยเหลือคุณ
TacoTranslate ช่วยให้คุณแปลแอป React ของคุณโดยอัตโนมัติอย่างรวดเร็ว ทั้งจากและไปยังมากกว่า 75 ภาษา เริ่มใช้งานวันนี้!