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

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

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

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

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

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

TacoTranslate нь хамгийн орчин үеийн AI-г ашиглан таны текстүүдийг ямар ч хэл рүү автоматаар орчуулж, 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. 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 шинжүүд. Анхаар: 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 түлхүүр ашиглан продакшн програмыг шалгах, шинэ мөрүүдийг амьдралд гарахаас өмнө нэмэх зориулалттай хаалттай, хамгаалалттай туршилтын орчинтой байхыг бид зөвлөж байна. Энэ нь хэн нэгэнд таны нууц API түлхүүрийг хулгайлах, мөн холбоогүй шинэ тэмдэгт мөрүүдийг нэмэх замаар орчуулгын төслийг хэт ихрүүлэхээс сэргийлнэ.

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

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