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 түлхүүр үүсгэнэ. Бид эдгээрийг орчны хувьсагчид (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: Үндсэн нөөцөд буцах локалийн код. Энэ жишээнд бид англи хэлний хувьд 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'; тэмдэглэгийг анхаараарай.

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

Одоо анхны хуудсаа бүтээе! /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!