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

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

เมื่อโลกมีการเป็นสากลมากขึ้น การที่นักพัฒนาเว็บจะสร้างแอปพลิเคชันที่รองรับผู้ใช้จากประเทศและวัฒนธรรมที่แตกต่างกันก็ยิ่งมีความสำคัญมากขึ้น หนึ่งในวิธีสำคัญในการบรรลุเป้าหมายนี้คือการทำ 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: รหัสโลเคลสำรองเริ่มต้น ในตัวอย่างนี้ เราจะตั้งค่าเป็น en สำหรับภาษาอังกฤษ.
• TACOTRANSLATE_ORIGIN: “โฟลเดอร์” ที่จะเก็บข้อความของคุณ เช่น URL ของเว็บไซต์ของคุณ. อ่านเพิ่มเติมเกี่ยวกับต้นทางได้ที่นี่.

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!