วิธีการเพิ่มการแปลภาษาในแอป Next.js ที่ใช้ Pages Router
ทำให้แอป React ของคุณเข้าถึงได้มากขึ้นและขยายตลาดใหม่ด้วยการทำให้รองรับการแปลภาษาระหว่างประเทศ (i18n)
เมื่อโลกกลายเป็นโลกาภิวัฒน์มากขึ้น จึงเป็นเรื่องสำคัญอย่างยิ่งสำหรับนักพัฒนาเว็บที่จะสร้างแอปพลิเคชันที่สามารถรองรับผู้ใช้จากประเทศและวัฒนธรรมที่หลากหลาย หนึ่งในวิธีหลักในการบรรลุเป้าหมายนี้คือผ่าน internationalization (i18n) ซึ่งช่วยให้คุณปรับแอปพลิเคชันของคุณให้รองรับหลายภาษา สกุลเงิน และรูปแบบวันที่ที่แตกต่างกัน
ในบทเรียนนี้ เราจะสำรวจวิธีการเพิ่ม internationalization ในแอป React Next.js ของคุณ โดยใช้การเรนเดอร์ฝั่งเซิร์ฟเวอร์ TL;DR: ดูตัวอย่างเต็มได้ที่นี่
คู่มือนี้สำหรับแอปพลิเคชัน Next.js ที่ใช้ Pages Router เท่านั้น
หากคุณกำลังใช้ App Router, กรุณาดูคู่มือนี้แทน
ขั้นตอนที่ 1: ติดตั้งไลบรารี i18n
ในการใช้งานการแปลหลายภาษาในแอป 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 ที่เป็นความลับไปยังสภาพแวดล้อมการทำงานบนฝั่งลูกค้า
เราจะเพิ่มตัวแปรสภาพแวดล้อมอีกสองตัว: 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 keys ที่ได้ก่อนหน้านี้ ตัวอย่างเช่น สร้างไฟล์ชื่อ /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
ที่กำหนดเอง เราจะเพิ่มผู้ให้บริการ 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 ของคุณรองรับหลายภาษาได้อย่างรวดเร็วและอัตโนมัติในทุกภาษา เริ่มต้นวันนี้!