Next.js аппликейшнүүдийн олон улсынчлал (i18n)-ын хамгийн сайн шийдэл

Ажиллах зарчим

Дэлхий улам бүр глобалчлагдаж байгаа тул веб хөгжүүлэгчдэд өөр өөр улс орон, соёлын хэрэглэгчдэд тохирсон програмуудыг бүтээх нь улам чухал болж байна. Үүний нэг гол арга нь олон улсын тохируулга (i18n) бөгөөд энэ нь таны програмыг янз бүрийн хэл, валют, огнооны форматтай нийцүүлэх боломжийг олгодог.

Энэхүү хичээлд бид React Next.js програмд сервер талын рендерингтэйгээр олон улсын тохируулга хэрхэн нэмж болохыг судална. TL;DR: Эндээс бүрэн жишээг үзнэ үү.

Энэхүү гарын авлага нь Pages Router ашигласан Next.js програмуудад зориулагдсан.
Хэрэв та App Router ашиглаж байгаа бол оронд нь энэ зааврыг үзнэ үү.

Алхам 1: i18n номын сан суулгах

Next.js апп-д олон улсын тохиргоо (internationalization) хэрэгжүүлэхийн тулд эхлээд i18n номын санг сонгоно. Үүний дотор хэд хэдэн алдартай номын санууд байдаг, тухайлбал next-intl. Гэсэн хэдий ч энэ жишээнд бид TacoTranslate ашиглах болно.

TacoTranslate нь орчин үеийн хиймэл оюун ухааны тусламжтайгаар таны текстүүдийг аливаа хэл рүү автоматаар орчуулах бөгөөд JSON файлуудыг удирдах уйтгартай ажлаас чөлөөлдөг.

Үүнийг терминалдаа npm ашиглан суулгацгаая:

npm install tacotranslate

Алхам 2: TacoTranslate дээр үнэгүй данс үүсгээрэй

Модуль суулгагдсан тул одоо TacoTranslate данс, орчуулгын төсөл болон холбогдсон API түлхүүрүүдийг үүсгэх цаг ирлээ. Энд данс үүсгээрэй. Энэ нь үнэгүй бөгөөд кредит карт оруулах шаардлагагүй.

TacoTranslate програмын UI-д шинэ төсөл үүсгээд API түлхүүрүүдийн таб руу орно уу. Нэг read түлхүүр болон нэг read/write түлхүүр үүсгээрэй. Бид тэдгээрийг орчны хувьсагчид болгон хадгална. read түлхүүрийг бид public гэж нэрлэдэг, харин read/write түлхүүрийг secret гэж нэрлэнэ. Жишээлбэл, та тэдгээрийг төслийнхөө үндсэн хавтасанд байрлах .env файлд нэмэж болно.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Нууц read/write API түлхүүрийг клиент талын үйлдвэрлэлийн орчинд хэзээ ч задруулахгүй байхыг заавал баталгаажуулна уу.

Бид мөн хоёр орчны хувьсагчийг нэмнэ: 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 түлхүүрийг ил гаргана. Хэрэв бид локал, тест эсвэл staging орчинд (isProduction is false) байгаа бол шинэ мөрүүдийг орчуулалтад илгээхийг баталгаажуулахын тулд нууц read/write API түлхүүрийг ашиглана.

Одоог хүртэл бид 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!"/>;
}

Одоо та бүх React бүрэлдэхүүнүүд доторх тэмдэгт мөрүүдийг орчуулахын тулд Translate компонентыг ашиглаж болох болсон.

import {Translate} from 'tacotranslate/react';

function Component() {
	return <Translate string="Hello, world!"/>
}

Алхам 5: Байршуулаад туршина уу!

Бэлэн боллоо! Таны Next.js аппликейшн Translate компонентэд ямар нэгэн текст нэмэх бүрт одоо автоматаар орчуулагдах болно. Анхаар: API түлхүүр дээр read/write эрхтэй орчингууд л орчуулах зориулалтаар шинэ текст үүсгэх боломжтой. Ийм API түлхүүртэйгээр үйлдвэрлэлийн програмыг туршиж, амьдралд оруулахаас өмнө шинэ текстүүдийг нэмж турших зориулалттай хаалттай, хамгаалсан staging орчинтой байхыг бид зөвлөж байна. Энэ нь хэн нэгэнд таны нууц 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!