App Router ашиглаж буй Next.js програмд олон улсынчлалыг (i18n) хэрхэн хэрэгжүүлэх вэ?

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

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

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

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

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

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

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