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

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

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

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

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

Next.js програмдаа олон улсын хэлжилтийг хэрэгжүүлэхийн тулд эхлээд i18n номын сан сонгоно. Олон алдартай номын санууд байгаа бөгөөд тэдний нэг нь next-intl. Гэхдээ энэ жишээнд бид TacoTranslate ашиглана.

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

Түүнийг терминал дээрээ npm ашиглан суулгая:

npm install tacotranslate

Алхам 2: TacoTranslate-д үнэгүй данс үүсгээрэй

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

TacoTranslate програмын UI дээр төсөл үүсгээд API keys таб руу орно. Нэг read түлхүүр болон нэг read/write түлхүүр үүсгээрэй. Бид эдгээрийг орчны хувьсагчид болгон хадгална. read түлхүүрийг бид public гэж нэрлэдэг бол read/write түлхүүрийг secret гэж нэрлэдэг. Жишээ нь, тэдгээрийг төслийн тань үндсэн хавтас дахь .env файлд нэмэж болно.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Нууц read/write API түлхүүрийг клиент талын үйлдвэрлэлийн (production) орчинд хэзээ ч задруулахгүй байхыг анхаарна уу.

Мөн бид хоёр орчны хувьсагчийг нэмэх болно: TACOTRANSLATE_DEFAULT_LOCALE болон TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Анхдагч (fallback) локаль код. Энэ жишээнд бид үүнийг англи хэлний хувьд en гэж тогтооно.
• TACOTRANSLATE_ORIGIN: Текстүүдээ хадгалах “фолдер”, жишээлбэл таны вэбсайтын URL. Энд origins-ийн талаар илүү ихийг уншина уу.

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_IS_PRODUCTION === 'true'
			? process.env.TACOTRANSLATE_PROJECT_LOCALE
			: undefined,
});

module.exports = tacoTranslate;

Бид удахгүй автоматаар TACOTRANSLATE_API_KEY болон TACOTRANSLATE_PROJECT_LOCALE-ыг тодорхойлно.

Клиентын кодыг тусад нь файлд үүсгэх нь дараа дахин ашиглахад хялбар болгодог. getLocales нь зөвхөн зарим дотоод алдааны удирдлагатай туслах функц юм. Одоо /app/[locale]/tacotranslate.tsx нэртэй файл үүсгэж, тэнд бид TacoTranslate провайдерыг хэрэгжүүлэх болно.

'use client';

import React, {type ReactNode} from 'react';
import {
	type TranslationContextProperties,
	TacoTranslate as ImportedTacoTranslate,
} from 'tacotranslate/react';
import tacoTranslateClient from '@/tacotranslate-client';

export default function TacoTranslate({
	locale,
	origin,
	localizations,
	children,
}: TranslationContextProperties & {
	readonly children: ReactNode;
}) {
	return (
		<ImportedTacoTranslate
			client={tacoTranslateClient}
			locale={locale}
			origin={origin}
			localizations={localizations}
		>
			{children}
		</ImportedTacoTranslate>
	);
}

Энд байгаа 'use client'; нь клиент компонент гэдгийг зааж байгааг анхаарна уу.

Context provider одоо бэлэн болсон тул манай програмын үндсэн layout болох /app/[locale]/layout.tsx нэртэй файлыг үүсгээрэй. Энэ зам нь Dynamic Routes-ийг ашигласан хавтс агуулж байгааг анхаарна уу; энд [locale] нь динамик параметр юм.

import React, {type ReactNode} from 'react';
import {type Locale, isRightToLeftLocaleCode} from 'tacotranslate';
import './global.css';
import tacoTranslateClient from '@/tacotranslate-client';
import TacoTranslate from './tacotranslate';

export async function generateStaticParams() {
	const locales = await tacoTranslateClient.getLocales();
	return locales.map((locale) => ({locale}));
}

type RootLayoutParameters = {
	readonly params: Promise<{locale: Locale}>;
	readonly children: ReactNode;
};

export default async function RootLayout({params, children}: RootLayoutParameters) {
	const {locale} = await params;
	const origin = process.env.TACOTRANSLATE_ORIGIN;
	const localizations = await tacoTranslateClient.getLocalizations({
		locale,
		origins: [origin /* , other origins to fetch */],
	});

	return (
		<html lang={locale} dir={isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr'}>
			<body>
				<TacoTranslate
					locale={locale}
					origin={origin}
					localizations={localizations}
				>
					{children}
				</TacoTranslate>
			</body>
		</html>
	);
}

Энд анхаарах эхний зүйл бол бид тухайн хэлд зориулсан орчуулгыг татахдаа манай Dynamic Route параметр [locale]-ыг ашиглаж байгаагаа юм. Мөн generateStaticParams нь таны төслийн идэвхжүүлсэн бүх locale кодыг урьдчилан үүсгэж (pre-render) гаргагдахыг баталгаажуулдаг.

Одоо анхны хуудсаа бүтээе! /app/[locale]/page.tsx нэртэй файл үүсгээрэй.

import React from 'react';
import {Translate} from 'tacotranslate/react';

export const revalidate = 60;
export default async function Page() {
	return (
		<Translate string="Hello, world!" />
	);
}

Next.js-д хуудсыг 60 секундийн дараа дахин бүтээж, таны орчуулгуудыг шинэчилсэн байлгахыг заадаг revalidate хувьсагчийг анхаарна уу.

Алхам 4: Сервер талын рендерингийг хэрэгжүүлэх

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

Сервер талын рендерингийг тохируулахын тулд /next.config.js файлыг үүсгэх эсвэл өөрчлөх:

const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslateClient = require('./tacotranslate-client');

module.exports = async () => {
	const config = await withTacoTranslate(
		{},
		{
			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'),
		}
	);

	// NOTE: Remove i18n from config when using the app router
	return {...config, i18n: undefined};
};

Өөрийн тохиргоонд нийцүүлэн isProduction шалгалтыг өөрчил. Хэрэв true бол TacoTranslate нийтийн API түлхүүрийг ил гаргана. Хэрэв бид локал, туршилтын эсвэл staging орчинд (isProduction is false) байвал, бид нууц read/write API түлхүүрийг ашиглан шинэ текстүүдийг орчуулалтад илгээж байгааг баталгаажуулна.

Маршрутизаци болон дахин чиглүүлэх төлөвлөснөөр ажиллахыг баталгаажуулахын тулд бид /middleware.ts нэртэй файл үүсгэх шаардлагатай. Middleware ашиглан бид хэрэглэгчдийг тэдний хүссэн хэлээр харуулсан хуудс руу чиглүүлэх боломжтой.

import {type NextRequest} from 'next/server';
import {middleware as tacoTranslateMiddleware} from 'tacotranslate/next';
import tacoTranslate from '@/tacotranslate-client';

export const config = {
	matcher: ['/((?!api|_next|favicon.ico).*)'],
};

export async function middleware(request: NextRequest) {
	return tacoTranslateMiddleware(tacoTranslate, request);
}

Next.js-ийн Middleware баримт бичгийн дагуу matcher–ийг тохируулсан эсэхээ шалгаарай: Next.js-ийн Middleware баримт бичиг.

Клиент тал дээр та хэрэглэгчийн илүүд үзсэн хэлийг өөрчлөхийн тулд locale cookie-г өөрчилж болно. Үүнийг хэрхэн хийх талаар санаа авахын тулд бүрэн жишээ кодыг үзнэ үү!

Алхам 5: Байршуулж, туршина уу!

Бид бэлэн боллоо! Одоо таны React аппликейшн 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 Pages 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!