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

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

ในบทช่วยสอนนี้ เราจะสำรวจวิธีเพิ่มการรองรับหลายภาษาให้กับแอป React Next.js ของคุณ พร้อมกับการเรนเดอร์ฝั่งเซิร์ฟเวอร์. TL;DR: ดูตัวอย่างฉบับเต็มที่นี่.

คำแนะนำนี้สำหรับแอปพลิเคชัน Next.js ที่ใช้ Pages Router.
หากคุณกำลังใช้ App 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: รหัส 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_DEFAULT_LOCALE ?? '',
});

module.exports = tacoTranslate;

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

การสร้าง client ในไฟล์แยกจะทำให้ง่ายต่อการใช้งานซ้ำในภายหลัง ตอนนี้ โดยใช้ /pages/_app.tsx ที่กำหนดเอง เราจะเพิ่ม provider ของ TacoTranslate.

import React from 'react';
import {type AppProps} from 'next/app';
import {type Origin, type Locale, type Localizations} from 'tacotranslate';
import TacoTranslate from 'tacotranslate/react';
import TacoTranslateHead from 'tacotranslate/next/head';
import tacoTranslate from '../tacotranslate-client';

type PageProperties = {
	origin: Origin;
	locale: Locale;
	locales: Locale[];
	localizations: Localizations;
};

export default function App({Component, pageProps}: AppProps<PageProperties>) {
	const {origin, locale, locales, localizations} = pageProps;

	return (
		<TacoTranslate
			client={tacoTranslate}
			origin={origin}
			locale={locale}
			localizations={localizations}
		>
			<TacoTranslateHead rootUrl="https://your-website.com" locales={locales} />
			<Component {...pageProps} />
		</TacoTranslate>
	);
}

หากคุณมี pageProps และ _app.tsx ที่กำหนดเองอยู่แล้ว โปรดขยายการนิยามด้วยคุณสมบัติและโค้ดจากด้านบน.

ขั้นตอนที่ 4: การใช้งานการเรนเดอร์ฝั่งเซิร์ฟเวอร์

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

เราจะเริ่มด้วยการสร้างหรือแก้ไข /next.config.js.

const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslateClient = require('./tacotranslate-client');

module.exports = async () => {
	const config = {};

	return withTacoTranslate(config, {
		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'),
	});
};

ปรับการตรวจสอบ isProduction ให้เหมาะกับการตั้งค่าของคุณ หาก true, TacoTranslate จะเปิดเผยกุญแจ API สาธารณะ หากเราอยู่ในสภาพแวดล้อมท้องถิ่น การทดสอบ หรือสเตจ (isProduction is false), เราจะใช้กุญแจ API แบบลับ read/write เพื่อให้แน่ใจว่าสตริงใหม่จะถูกส่งเพื่อแปล

จนถึงตอนนี้ เราได้ตั้งค่าแอป Next.js ให้มีเพียงรายการภาษาที่รองรับเท่านั้น สิ่งต่อไปที่เราจะทำคือดึงการแปลสำหรับทุกหน้าในเว็บของคุณ สำหรับการทำเช่นนั้น คุณจะใช้ getTacoTranslateStaticProps หรือ getTacoTranslateServerSideProps ขึ้นอยู่กับความต้องการของคุณ.

ฟังก์ชันเหล่านี้รับอาร์กิวเมนต์สามตัว: อ็อบเจ็กต์ Next.js Static Props Context, การกำหนดค่าสำหรับ TacoTranslate และพร็อพ Next.js ที่เป็นทางเลือก โปรดทราบว่า revalidate ใน getTacoTranslateStaticProps ถูกตั้งค่าไว้ที่ 60 ตามค่าเริ่มต้น เพื่อให้การแปลของคุณเป็นปัจจุบันอยู่เสมอ.

เพื่อใช้ฟังก์ชันใดฟังก์ชันหนึ่งในเพจ ให้สมมติว่าคุณมีไฟล์เพจเช่น /pages/hello-world.tsx.

import {Translate} from 'tacotranslate/react';
import getTacoTranslateStaticProps from 'tacotranslate/next/get-static-props';
import tacoTranslateClient from '../tacotranslate-client';

export async function getStaticProps(context) {
	return getTacoTranslateStaticProps(context, {client: tacoTranslateClient});
}

export default function Page() {
	return <Translate string="Hello, world!"/>;
}

ตอนนี้คุณควรจะสามารถใช้คอมโพเนนต์ Translate เพื่อแปลสตริงภายในคอมโพเนนต์ React ทั้งหมดของคุณได้แล้ว.

import {Translate} from 'tacotranslate/react';

function Component() {
	return <Translate string="Hello, world!"/>
}

ขั้นตอนที่ 5: ปรับใช้และทดสอบ!

เรียบร้อยแล้ว! แอป React ของคุณจะถูกแปลโดยอัตโนมัติเมื่อคุณเพิ่มสตริงใดๆ ลงในคอมโพเนนต์ Translate. โปรดทราบว่าเฉพาะสภาพแวดล้อมที่มีสิทธิ์ read/write บนคีย์ API เท่านั้นที่จะสามารถสร้างสตริงใหม่เพื่อให้แปลได้ เราแนะนำให้มีสภาพแวดล้อมสเตจที่ปิดและปลอดภัยเพื่อทดสอบแอปเวอร์ชันโปรดักชันของคุณด้วยคีย์ API แบบนั้น โดยเพิ่มสตริงใหม่ก่อนนำขึ้นใช้งานจริง วิธีนี้จะช่วยป้องกันไม่ให้ใครก็ตามขโมยคีย์ API ลับของคุณ และอาจป้องกันไม่ให้โครงการแปลของคุณบานปลายจากการเพิ่มสตริงใหม่ที่ไม่เกี่ยวข้อง

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

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