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

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

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

ในบทแนะนำนี้ เราจะสำรวจวิธีการเพิ่มความสามารถด้านนานาชาติให้กับแอป React Next.js ของคุณ โดยรองรับการเรนเดอร์ฝั่งเซิร์ฟเวอร์ TL;DR: ดูตัวอย่างฉบับเต็มได้ที่นี่.

คำแนะนำนี้สำหรับแอป Next.js ที่กำลังใช้ Pages Router.
หากคุณกำลังใช้ App Router, โปรดดูคำแนะนำฉบับนี้แทน.

ขั้นตอนที่ 1: ติดตั้งไลบรารี i18n

ในการนำความสามารถด้านการแปล (internationalization หรือ 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

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

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

• TACOTRANSLATE_DEFAULT_LOCALE: รหัสโลเคลสำรองเริ่มต้น ในตัวอย่างนี้ เราจะตั้งค่าเป็น en สำหรับภาษาอังกฤษ.
• TACOTRANSLATE_ORIGIN: “folder” ที่เก็บสตริงของคุณ เช่น 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 โดยอัตโนมัติในไม่ช้า

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