วิธีการใช้งานการแปลภาษาระหว่างประเทศในแอป Next.js ที่ใช้ App Router

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

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

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

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

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

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

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

• TACOTRANSLATE_DEFAULT_LOCALE: รหัสภาษาตั้งต้นสำหรับ fallback ในตัวอย่างนี้ เราจะตั้งค่าเป็น 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_IS_PRODUCTION === 'true'
			? process.env.TACOTRANSLATE_PROJECT_LOCALE
			: undefined,
});

module.exports = tacoTranslate;

เราจะทำการกำหนดค่า TACOTRANSLATE_API_KEY และ TACOTRANSLATE_PROJECT_LOCALE โดยอัตโนมัติในไม่ช้า

การสร้าง client ในไฟล์แยกต่างหากทำให้ใช้งานซ้ำได้ง่ายขึ้นในภายหลัง getLocales เป็นเพียงฟังก์ชันอรรถประโยชน์ที่มีการจัดการข้อผิดพลาดในตัวเล็กน้อย ตอนนี้ ให้สร้างไฟล์ชื่อ /app/[locale]/tacotranslate.tsx ซึ่งเราจะทำการติดตั้ง TacoTranslate provider

'use client';

import React, {type ReactNode} from 'react';
import {
	type TranslationContextProperties,
	TacoTranslate as ImportedTacoTranslate,
} from 'tacotranslate/react';
import tacoTranslateClient from '@/tacotranslate-client';

export default function TacoTranslate({
	locale,
	origin,
	localizations,
	children,
}: TranslationContextProperties & {
	readonly children: ReactNode;
}) {
	return (
		<ImportedTacoTranslate
			client={tacoTranslateClient}
			locale={locale}
			origin={origin}
			localizations={localizations}
		>
			{children}
		</ImportedTacoTranslate>
	);
}

สังเกต 'use client'; ที่บ่งบอกว่านี่คือคอมโพเนนต์ฝั่งไคลเอนต์

เมื่อ context provider พร้อมใช้งานแล้ว ให้สร้างไฟล์ชื่อ /app/[locale]/layout.tsx ซึ่งเป็น root layout ในแอปพลิเคชันของเรา โปรดสังเกตว่าเส้นทางนี้มีโฟลเดอร์ที่ใช้ Dynamic Routes โดยที่ [locale] เป็นพารามิเตอร์ไดนามิก

import React, {type ReactNode} from 'react';
import {type Locale, isRightToLeftLocaleCode} from 'tacotranslate';
import './global.css';
import tacoTranslateClient from '@/tacotranslate-client';
import TacoTranslate from './tacotranslate';

export async function generateStaticParams() {
	const locales = await tacoTranslateClient.getLocales();
	return locales.map((locale) => ({locale}));
}

type RootLayoutParameters = {
	readonly params: Promise<{locale: Locale}>;
	readonly children: ReactNode;
};

export default async function RootLayout({params, children}: RootLayoutParameters) {
	const {locale} = await params;
	const origin = process.env.TACOTRANSLATE_ORIGIN;
	const localizations = await tacoTranslateClient.getLocalizations({
		locale,
		origins: [origin /* , other origins to fetch */],
	});

	return (
		<html lang={locale} dir={isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr'}>
			<body>
				<TacoTranslate
					locale={locale}
					origin={origin}
					localizations={localizations}
				>
					{children}
				</TacoTranslate>
			</body>
		</html>
	);
}

สิ่งแรกที่ควรสังเกตที่นี่คือเรากำลังใช้พารามิเตอร์ Dynamic Route ของเรา [locale] เพื่อดึงการแปลสำหรับภาษานั้น นอกจากนี้ generateStaticParams ยังช่วยให้แน่ใจว่ารหัส locale ทั้งหมดที่คุณเปิดใช้งานสำหรับโปรเจกต์ของคุณจะถูก pre-rendered ล่วงหน้าแล้ว

ตอนนี้ มาสร้างหน้าแรกของเรากันเถอะ! สร้างไฟล์ชื่อ /app/[locale]/page.tsx

import React from 'react';
import {Translate} from 'tacotranslate/react';

export const revalidate = 60;
export default async function Page() {
	return (
		<Translate string="Hello, world!" />
	);
}

โปรดสังเกตตัวแปร revalidate ซึ่งบอก Next.js ให้สร้างหน้าขึ้นใหม่หลังจาก 60 วินาที และรักษาการแปลของคุณให้ทันสมัยอยู่เสมอ

ขั้นตอนที่ 4: การใช้งานการเรนเดอร์ฝั่งเซิร์ฟเวอร์

TacoTranslate รองรับการเรนเดอร์ฝั่งเซิร์ฟเวอร์ ซึ่งช่วยปรับปรุงประสบการณ์ผู้ใช้อย่างมากโดยการแสดงเนื้อหาที่แปลแล้วทันที แทนที่จะให้เห็นเนื้อหาที่ยังไม่ถูกแปลก่อน นอกจากนี้ เรายังสามารถข้ามการร้องขอเครือข่ายบนฝั่งไคลเอนต์ได้ เพราะเรามีคำแปลที่ต้องการสำหรับหน้าที่ผู้ใช้กำลังดูอยู่แล้ว

ในการตั้งค่า server side rendering ให้สร้างหรือแก้ไขไฟล์ /next.config.js ครับ:

const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslateClient = require('./tacotranslate-client');

module.exports = async () => {
	const config = await withTacoTranslate(
		{},
		{
			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'),
		}
	);

	// NOTE: Remove i18n from config when using the app router
	return {...config, i18n: undefined};
};

แก้ไขการตรวจสอบ isProduction ให้เหมาะสมกับการตั้งค่าของคุณ หาก true TacoTranslate จะใช้คีย์ API สาธารณะ แต่ถ้าเราอยู่ในสภาพแวดล้อมท้องถิ่น, ทดสอบ หรือสเตจ (isProduction is false) เราจะใช้คีย์ API ความลับ read/write เพื่อให้แน่ใจว่า string ใหม่จะถูกส่งเพื่อแปล

เพื่อให้การกำหนดเส้นทางและการเปลี่ยนเส้นทางทำงานตามที่คาดหวังไว้ เราจำเป็นต้องสร้างไฟล์ชื่อ /middleware.ts. โดยใช้ Middleware เราสามารถเปลี่ยนเส้นทางผู้ใช้ไปยังหน้าที่แสดงผลในภาษาที่พวกเขาเลือกได้.

import {type NextRequest} from 'next/server';
import {middleware as tacoTranslateMiddleware} from 'tacotranslate/next';
import tacoTranslate from '@/tacotranslate-client';

export const config = {
	matcher: ['/((?!api|_next|favicon.ico).*)'],
};

export async function middleware(request: NextRequest) {
	return tacoTranslateMiddleware(tacoTranslate, request);
}

โปรดตรวจสอบให้แน่ใจว่าได้ตั้งค่า matcher ตาม เอกสาร Next.js Middleware แล้ว

บนไคลเอนต์ คุณสามารถเปลี่ยนค่า locale cookie เพื่อเปลี่ยนภาษาที่ผู้ใช้ต้องการได้ โปรดดู ตัวอย่างโค้ดทั้งหมด สำหรับแนวทางการทำเช่นนี้!

ขั้นตอนที่ 5: ติดตั้งใช้งานและทดสอบ!

เราเสร็จแล้ว! แอป React ของคุณจะถูกแปลโดยอัตโนมัติเมื่อคุณเพิ่มข้อความใดๆ ลงในคอมโพเนนต์ 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 Pages 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!