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

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

เมื่โลกมีการเชื่อมต่อกันมากขึ้น ความสำคัญของการพัฒนาเว็บแอปพลิเคชันที่รองรับผู้ใช้จากประเทศและวัฒนธรรมที่หลากหลายก็เพิ่มมากขึ้น หนึ่งในวิธีสำคัญในการทำเช่นนี้คือการทำใหแอปสามารถรองรับการใช้งานหลายภาษา (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 ให้เหมาะกับการตั้งค่าของคุณ หาก trueTacoTranslate จะแสดงคีย์ 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!