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

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

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

ภายในอินเทอร์เฟซของแอปพลิเคชัน 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 โดยอัตโนมัติในเร็วๆ นี้

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

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

ตอนนี้มาเริ่มสร้างหน้าของเราเป็นหน้าแรกกันเถอะ! สร้างไฟล์ชื่อ /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!