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

Дэлхий улам бүр глобалчлагдаж байгаа энэ үед вэб хөгжүүлэгчдэд өөр улс, соёлын хэрэглэгчдэд зориулсан програмуудыг хөгжүүлэх нь улам чухал болж байна. Үүнийг хэрэгжүүлэх гол аргуудын нэг нь олон улсынчилал (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'; тэмдэглэгийг анхаараарай.

Контекст провайдер бэлэн болсон тул, /app/[locale]/layout.tsx нэртэй файлыг үүсгээрэй — энэ нь манай програмын үндсэн layout юм. Энэхүү зам нь 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);
}

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

Клиент талд та 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!