Next.js аппуудын олон хэлний (i18n) хамгийн сайн шийдэл

Яаж ажилдаг вэ

Дэлхий улам бүр глобалчлагдах тусам веб хөгжүүлэгчдэд янз бүрийн улс орон, соёлын хэрэглэгчдэд зориулагдсан програмуудыг бүтээх нь улам бүр чухал болж байна. Үүнийг хэрэгжүүлэх нэг гол арга бол олон улсынжуулалт (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 түлхүүрүүдийн таб руу орно. Нэг read түлхүүр, нэг read/write түлхүүр үүсгэнэ. Бид тэдгээрийг орчны хувьсагч болгон хадгална. 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 түлхүүрийг ил гаргана. Хэрэв бид локал, тест эсвэл стэйжинг орчинд байгаа бол (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!