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

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

ภายใน UI ของแอป 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 โดยอัตโนมัติในไม่ช้า.

การสร้าง client ในไฟล์แยกจะทำให้ง่ายต่อการนำกลับมาใช้ใหม่ในภายหลัง. getLocales เป็นเพียงฟังก์ชันช่วยเหลือที่มีการจัดการข้อผิดพลาดในตัว. ตอนนี้ให้สร้างไฟล์ชื่อ /app/[locale]/tacotranslate.tsx ซึ่งเราจะนำตัวให้บริการ 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!