Next.js програмд Pages Router ашиглаж байгаа тохиолдолд олон хэлт байдлыг хэрхэн хэрэгжүүлэх вэ

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

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

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

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

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

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

Терминал дээр npm ашиглан суулгацгаая:

npm install tacotranslate

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

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

TacoTranslate програмын UI-д төсөл үүсгээд, түүний API түлхүүрүүдийн таб руу ор. Нэг read түлхүүр, нэг read/write түлхүүр үүсгээрэй. Бид эдгээрийг орчны хувьсагч (environment variables) болгон хадгална. 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 шинж чанарууд. Анхаар: getTacoTranslateStaticProps дахь revalidate нь анхдагчаар 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: Хэрэгжүүлж, туршина уу!

Бид дууслаа! Таны React програмд Translate бүрэлдэхүүн хэсэгт ямар нэг стринг нэмэхэд одоо автоматаар орчуулагдах болно. Анхаарна уу: API түлхүүр дээр read/write эрхтэй орчин л орчуулж болох шинэ стрингүүдийг үүсгэх боломжтой. Бид амьдралд оруулахаас өмнө тийм API түлхүүр ашиглан үйлдвэрлэлийн програмыг шалгах, шинэ стрингүүдийг нэмэх зориулалттай хаалттай, аюулгүй staging орчинтой байхыг зөвлөж байна. Ингэснээр таны нууц API түлхүүрийг хэн нэгэн хулгайлах болон холбоогүй шинэ стрингүүдийг нэмэн орчуулгын төслийг хэт ихээр тэлэхээс сэргийлнэ.

Манай GitHub профайлаас бүрэн жишээг заавал үзээрэй. Тэнд та мөн үүнийг App Router ашиглан хэрхэн хийх жишээг олох болно! Хэрэв ямар нэг асуудал тулгарвал чөлөөтэй холбоо барина уу, бид танд баяртайгаар туслах болно.

TacoTranslate нь таны React програмуудыг 75-аас дээш хэл рүү болон тэднээс нь автоматаар, хурдан орчуулах боломжийг олгодог. Өнөөдөр эхлээрэй!