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

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

Энэхүү зааварт бид React Next.js програмд сервер талын рендерингтэйгээр олон улсынжуулалтыг хэрхэн нэмэхийг судлах болно. 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 keys таб руу орно уу. Нэг 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. Эх сурвалжуудын талаар дэлгэрэнгүйг энд уншина уу.

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-аас дээш хэл рүү болон тэднээс нь автоматаар, хурдан орчуулах боломжийг олгодог. Өнөөдөр эхлээрэй!