วิธีการใช้งานการทำสากลนิยม (internationalization) ในแอปพลิเคชัน 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 ใน terminal ของคุณ:

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

โปรดมั่นใจว่าอย่าเผยแพร่ read/write API key ที่เป็นความลับไปยังสภาพแวดล้อมฝั่งไคลเอนต์ที่ใช้งานจริง

เราจะเพิ่มตัวแปรสภาพแวดล้อมอีกสองตัว: TACOTRANSLATE_DEFAULT_LOCALE และ TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: รหัสภาษาตั้งต้นสำรองค่าเริ่มต้น ในตัวอย่างนี้เราจะตั้งค่าเป็น en สำหรับภาษาอังกฤษ
• TACOTRANSLATE_ORIGIN: "โฟลเดอร์" ที่จะเก็บข้อความของคุณ เช่น URL ของเว็บไซต์ของคุณ อ่านเพิ่มเติมเกี่ยวกับต้นกำเนิดได้ที่นี่

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.

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 โดยอัตโนมัติในไม่ช้า

การสร้างไคลเอนต์ในไฟล์แยกทำให้ใช้งานซ้ำได้ง่ายขึ้นในภายหลัง ตอนนี้ โดยใช้ /pages/_app.tsx แบบกำหนดเอง เราจะเพิ่มผู้ให้บริการ 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: การใช้งานการแสดงผลฝั่งเซิร์ฟเวอร์ (Server Side Rendering)

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 ให้เหมาะกับการตั้งค่าของคุณ หาก trueTacoTranslate จะแสดงคีย์ 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 เท่านั้นที่จะสามารถสร้างสตริงใหม่เพื่อแปลได้ เราแนะนำให้มีสภาพแวดล้อม staging ที่ปิดและปลอดภัย ซึ่งคุณสามารถทดสอบแอปโปรดักชันของคุณด้วยคีย์ API แบบนั้น โดยเพิ่มสตริงใหม่ก่อนที่จะเปิดใช้งานจริง ซึ่งจะช่วยป้องกันไม่ให้ใครขโมยคีย์ API ลับของคุณ และป้องกันไม่ให้โปรเจกต์การแปลของคุณขยายตัวโดยการเพิ่มสตริงใหม่ที่ไม่เกี่ยวข้องออกไปได้

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

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