วิธีการใช้งานการทำให้รองรับหลายภาษาในแอปพลิเคชัน Next.js ที่ใช้ App Router

ทำให้แอปพลิเคชัน React ของคุณเข้าถึงได้ง่ายขึ้นและขยายตลาดใหม่ด้วยการทำให้เป็นสากล (i18n)

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

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

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

.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 ที่นี่

.env

TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

ขั้นตอนที่ 3: การตั้งค่า TacoTranslate

เพื่อผสาน TacoTranslate เข้ากับแอปของคุณ คุณจะต้องสร้างไคลเอนต์โดยใช้คีย์ API จากขั้นตอนก่อนหน้า ตัวอย่างเช่น สร้างไฟล์ชื่อ /tacotranslate-client.js.

/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 โดยอัตโนมัติในเร็วๆ นี้

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

/app/[locale]/tacotranslate.tsx

'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] คือพารามิเตอร์แบบไดนามิก

/app/[locale]/layout.tsx

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

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

/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 ดังนี้:

/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 เพื่อให้แน่ใจว่าสตริงใหม่จะถูกส่งไปยังการแปล

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

/middleware.ts

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 เพื่อเปลี่ยนภาษาที่ผู้ใช้งานต้องการ โปรดดู ตัวอย่างโค้ดทั้งหมด เพื่อรับไอเดียเกี่ยวกับวิธีการทำเช่นนี้!

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

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