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

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

Энэхүү зааварт бид сервер тал дээр рендерлэх (server side rendering) боломжтой 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 түлхүүр үүсгэнэ үү. Эдгээрийг орчны хувьсагч (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. Энд эх сурвалжийн (origin) талаар дэлгэрэнгүй уншаарай.

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: Байршуулаад шалгана уу!

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

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

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