ทางออกที่ดีที่สุดสำหรับการรองรับหลายภาษา (i18n) ในแอป Next.js

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

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

ภายในอินเทอร์เฟซของแอป 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: รหัสโลเคลเริ่มต้นที่ใช้เป็นค่า fallback ในตัวอย่างนี้ เราจะตั้งเป็น 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 โดยอัตโนมัติในไม่ช้า.

การสร้างไคลเอนต์ในไฟล์แยกจะทำให้ง่ายขึ้นเมื่อใช้งานอีกครั้งในภายหลัง ตอนนี้ โดยใช้ /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: การนำการเรนเดอร์ฝั่งเซิร์ฟเวอร์มาใช้

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: ปรับใช้และทดสอบ!

เรียบร้อย! แอป 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!