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

เมื่อโลกยิ่งเป็นโลกาภิวัตน์มากขึ้น การที่นักพัฒนาเว็บจะสร้างแอปพลิเคชันให้รองรับผู้ใช้จากประเทศและวัฒนธรรมที่หลากหลายก็ยิ่งมีความสำคัญมากขึ้น หนึ่งในวิธีสำคัญคือการทำให้รองรับนานาชาติ (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 หนึ่งตัว และคีย์ 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_IS_PRODUCTION === 'true'
			? process.env.TACOTRANSLATE_PROJECT_LOCALE
			: undefined,
});

module.exports = tacoTranslate;

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

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

'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, ซึ่งเป็นเลย์เอาต์หลักในแอปของเรา โปรดสังเกตว่าเส้นทางนี้มีโฟลเดอร์ที่ใช้ 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 ทั้งหมดที่คุณเปิดใช้งานในโปรเจ็กต์ของคุณถูกเรนเดอร์ล่วงหน้า

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

ในการตั้งค่าการเรนเดอร์ฝั่งเซิร์ฟเวอร์ ให้สร้างหรือแก้ไข /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, เราสามารถเปลี่ยนเส้นทางผู้ใช้ไปยังหน้าที่แสดงในภาษาที่พวกเขาต้องการ

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