ทางออกที่ดีที่สุดสำหรับการทำให้รองรับหลายภาษา (i18n) ในแอปพลิเคชัน Next.js

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

เมื่อโลกมีการเป็นสากลมากขึ้น ยิ่งมีความจำเป็นที่นักพัฒนาเว็บจะต้องสร้างแอปพลิเคชันที่ตอบสนองผู้ใช้จากประเทศและวัฒนธรรมต่างๆ หนึ่งในวิธีสำคัญในการทำเช่นนี้คือการทำให้แอปรองรับหลายภาษา (i18n) ซึ่งช่วยให้คุณปรับแอปพลิเคชันให้เข้ากับภาษา สกุลเงิน และรูปแบบวันที่ที่แตกต่างกัน

ในบทแนะนำนี้ เราจะสำรวจวิธีการเพิ่มการรองรับหลายภาษาให้กับแอป 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 สร้างคีย์ read หนึ่งตัว และคีย์ read/write หนึ่งตัว เราจะเก็บพวกมันเป็นตัวแปรแวดล้อม คีย์ read คือสิ่งที่เราเรียกว่า public และคีย์ read/write คือ secret ตัวอย่างเช่น คุณสามารถเพิ่มพวกมันลงในไฟล์ .env ในโฟลเดอร์รากของโปรเจ็กต์ของคุณ

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

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

เราจะเพิ่มตัวแปรแวดล้อมอีกสองตัวด้วย: 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 เข้ากับแอปของคุณ คุณจะต้องสร้างไคลเอนต์โดยใช้คีย์ 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: ปรับใช้และทดสอบ!

เรียบร้อยแล้ว! แอป Next.js ของคุณจะถูกแปลโดยอัตโนมัติเมื่อคุณเพิ่มสตริงใดๆ ลงในคอมโพเนนต์ Translate. โปรดทราบว่าเฉพาะสภาพแวดล้อมที่มีสิทธิ์ read/write บนคีย์ API เท่านั้นที่จะสามารถสร้างสตริงใหม่เพื่อส่งไปแปลได้ เราขอแนะนำให้มีสภาพแวดล้อมสเตจที่ปิดและปลอดภัย ซึ่งคุณสามารถทดสอบแอปโปรดักชันของคุณด้วยคีย์ 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!