Next.js аппликейшнүүдийн олон хэлний дэмжлэг (i18n) дээрх шилдэг шийдэл

Хэрхэн ажилдаг вэ

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

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

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

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

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

TacoTranslate нь хамгийн сүүлийн үеийн хиймэл оюун ухааны тусламжтайгаар таны мөрүүдийг ямар ч хэл рүү автоматаар орчуулах ба 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) locale код. Энэ жишээнд бид үүнийг англи хэлэнд зориулж en гэж тогтооно.
• TACOTRANSLATE_ORIGIN: Мөрүүд (strings) хадгалагдах “фолдер”, жишээ нь таны вэбсайтын 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-р алхам: Байршуулж, шалга!

Бэлэн боллоо! Одоо таны Next.js програмд Translate компонентэд текст нэмэхэд уг текстүүд автоматаар орчуулагдана. Анхаар: API түлхүүр дээр read/write зөвшөөрөлтэй орчин л орчуулагдах шинэ текстүүдийг үүсгэх боломжтой. Бид лайв болгохоос өмнө ийм API түлхүүр ашиглан үйлдвэрлэлийн програмыг шалгах, шинэ текстүүдийг нэмэх зориулалттай хаалттай, аюулгүй staging (туршилтын) орчинтой байхыг зөвлөж байна. Энэ нь хэн нэгэнд таны нууц API түлхүүрийг хулгайлахыг, мөн холбоогүй шинэ текстүүдийг нэмснээр орчуулгын төсөл тань хэт ихээр өсөх боломжийг зогсооно.

Be sure to check out the complete example over at our GitHub profile. There, you’ll also find an example of how to do this using the App Router! If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Get started today!