โซลูชันที่ดีที่สุดสำหรับการทำสากล (i18n) ในแอป Next.js

การทำงานอย่างไร

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

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

คำแนะนำนี้สำหรับแอปพลิเคชัน Next.js ที่ใช้ Pages Router.
หากคุณกำลังใช้ App Router, โปรดดูคำแนะนำนี้แทน.

ขั้นตอนที่ 1: ติดตั้งไลบรารี i18n

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

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

เรามาติดตั้งโดยใช้ npm ในเทอร์มินัลของคุณ:

npm install tacotranslate

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

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

ภายใน UI ของแอปพลิเคชัน TacoTranslate ให้สร้างโปรเจกต์ และไปที่แท็บ API keys ของโปรเจกต์นั้น สร้างกุญแจ read จำนวนหนึ่ง และกุญแจ read/write จำนวนหนึ่ง เราจะเก็บกุญแจเหล่านี้เป็นตัวแปรสิ่งแวดล้อม (environment variables) กุญแจ 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 ของเว็บไซต์ของคุณ อ่านข้อมูลเพิ่มเติมเกี่ยวกับ 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 ให้เหมาะกับการตั้งค่าของคุณ หาก 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: นำขึ้นใช้งานและทดสอบ!

เราเสร็จแล้ว! แอปพลิเคชัน Next.js ของคุณจะถูกแปลโดยอัตโนมัติเมื่อคุณเพิ่มสตริงใด ๆ ลงในองค์ประกอบ 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 App 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!