วิธีการใช้งานการทำให้เป็นสากล (internationalization) ในแอปพลิเคชัน Next.js ที่ใช้ App Router

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

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

ขั้นตอนที่ 2: สร้างบัญชี TacoTranslate ฟรี

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

ภายใน UI ของแอปพลิเคชัน TacoTranslate ให้สร้างโปรเจกต์ และไปที่แท็บคีย์ API ของโปรเจกต์นั้น สร้างคีย์ read หนึ่งอัน และคีย์ read/write อีกหนึ่งอัน เราจะบันทึกคีย์เหล่านี้เป็นตัวแปรสภาพแวดล้อม คีย์ read คือสิ่งที่เราเรียกว่า public และคีย์ read/write คือ 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

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /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 ซึ่งเราจะดำเนินการ implement provider ของ 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 ให้เหมาะกับการตั้งค่าของคุณ หาก trueTacoTranslate จะแสดงคีย์ 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 ลับของคุณ และป้องกันไม่ให้โปรเจกต์แปลของคุณมีสตริงใหม่ที่ไม่เกี่ยวข้องเพิ่มขึ้นอย่างไม่จำเป็น

โปรดตรวจสอบ ตัวอย่างสมบูรณ์ที่นี่ บนโปรไฟล์ GitHub ของเรา ที่นั่นคุณยังจะพบตัวอย่างวิธีการทำเช่นนี้โดยใช้ Pages Router! หากคุณพบปัญหาใด ๆ โปรดอย่าลังเลที่จะ ติดต่อเรา เรายินดีเป็นอย่างยิ่งที่จะช่วยเหลือคุณ

TacoTranslate ช่วยให้คุณทำให้แอป React ของคุณรองรับภาษาต่าง ๆ ได้อย่างรวดเร็วโดยอัตโนมัติ เริ่มต้นวันนี้!