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

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

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

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

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

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

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

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

npm install tacotranslate

Step 2: Үнэгүй TacoTranslate данс үүсгээрэй

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

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

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

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