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

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

ในบทความนี้ เราจะสำรวจวิธีการเพิ่มการรองรับนานาชาติให้กับแอป 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

Step 2: สร้างบัญชี TacoTranslate ฟรี

ตอนนี้คุณติดตั้งโมดูลเรียบร้อยแล้ว ถึงเวลาสร้างบัญชี TacoTranslate โปรเจกต์แปล และคีย์ API ที่เกี่ยวข้อง สร้างบัญชีที่นี่. ฟรี และ ไม่ต้องใช้บัตรเครดิต.

ภายในส่วนติดต่อผู้ใช้ของแอป TacoTranslate ให้สร้างโปรเจกต์ แล้วไปที่แท็บคีย์ API ของโปรเจกต์นั้น คุณควรสร้างคีย์หนึ่งอัน 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: รหัสโลเคลสำรองค่าเริ่มต้น (fallback 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, ซึ่งเราจะใช้งานโปรไวเดอร์ 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'; ซึ่งบ่งชี้ว่านี่คือคอมโพเนนต์ฝั่งไคลเอนต์

เมื่อคอนเท็กซ์โปรไวเดอร์พร้อมใช้งานแล้ว ให้สร้างไฟล์ชื่อ /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!