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

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

Энэхүү нийтлэлд бид React Next.js програмд олон улсын хэрэглээг хэрхэн нэмж, сервер талын рендеринг хийх талаар судална. 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 програмын хэрэглэгчийн интерфэйс дотор төсөл үүсгэж, API түлхүүрүүдийн таб руу орно уу. Нэг 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. Энд эх үүсвэрүүдийн талаар дэлгэрэнгүй уншина уу.

TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

Алхам 3: TacoTranslate тохируулах

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /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 нэртэй файлыг бүтээнэ үү. Энэ зам нь 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!" />
	);
}

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

Алхам 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 эрхтэй орчингууд л шинэ орчуулах текст үүсгэх боломжтой. Бид таньд хаалттай, баталгаажсан staging орчинтой байхыг зөвлөж байна, энд та үйлдвэрлэлийн програмыг тэр төрлийн API түлхүүрээр туршиж, шинэ текстүүдийг амьдруулахын өмнө нэмж болно. Энэ нь таны нууц API түлхүүрийг хулгайлхаас сэргийлж, орчуулгын төсөлдөө шинэ, холбоогүй текстүүдийг нэмэх замаар төсөл тань хэтрэхээс хамгаална.

Заавал бидний GitHub профайл дээрх бүрэн жишээг шалгаарай. Тэнд та Pages Router ашиглан хэрхэн энэ зүйлийг хийх жишээг бас олох болно! Хэрэв ямар нэгэн асуудал тулгарвал, чөлөөтэйгээр холбогдоно уу, бид танд дэмжлэг үзүүлэхэд баяртай байх болно.

TacoTranslate нь таны React програмуудыг ямар ч хэл рүү болон ямар ч хэлнээс автоматаар хурдан орчуулах боломжийг олгодог. Өнөөдрөөс эхлээрэй!