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

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

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

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

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

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

TacoTranslate нь орчин үеийн хиймэл оюун ухааныг ашиглан таны мөрүүдийг аль ч хэл рүү автоматаар орчуулж, 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 түлхүүрийг клиент талын үйлдвэрлэлийн орчинд хэзээ ч задруулахгүй гэдгийг анхаараарай.

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

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

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'; гэдгийг анхаарна уу.

Контекст провайдер одоо ашиглахад бэлэн болсон тул програмынхаа үндсэн 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 кодыг урьдчилан рендерлэж байгааг баталгаажуулна.

Одоо анхны хуудсаа бүтээцгээе! Дараах нэртэй файл үүсгээрэй: /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-ыг тохируулсан эсэхээ баталгаажуул.

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

5-р алхам: Байршуулаад туршина уу!

Бэлэн боллоо! Таны React програмд Translate компонентэд ямар нэг мөр нэмэх бүрт эдгээр нь автоматаар орчуулагдах болно. Анхаарна уу: API түлхүүр дээр read/write зөвшөөрөлтэй орчин л орчуулалтад оруулах шинэ мөрүүд үүсгэх боломжтой. Ийм төрлийн API түлхүүр ашиглан үйлдвэрлэлийн програмыг турших, амьдралд оруулахаас өмнө шинэ мөрүүдийг нэмэх зориулалттай хаалттай, бүрэн хамгаалагдсан туршалтын орчинг бий болгохыг бид зөвлөж байна. Энэ нь таны нууц 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!