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