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

วิธีการทำงาน

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

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

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

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

TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

ขั้นตอนที่ 3: การตั้งค่า TacoTranslate

ในการผสาน TacoTranslate เข้ากับแอปพลิเคชันของคุณ คุณจะต้องสร้าง client โดยใช้คีย์ 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: การใช้งาน 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: โพสต์และทดสอบ!

เราเสร็จแล้ว! แอป 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!