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

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

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

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

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

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

TacoTranslate уламжлалт AI-г ашиглан таны текстүүдийг хүссэн хэл рүү автоматаар орчуулах бөгөөд JSON файл удирдах төвөгтэй ажлаас танд чөлөөлнө.

Үүнийг таны терминал дээр npm ашиглан суулгая:

npm install tacotranslate

Алхам 2: Үнэгүй TacoTranslate акаунт үүсгээрэй

Одоо та модулийг суулгасан тул TacoTranslate данс, орчуулгын төсөл болон холбогдох API түлхүүрүүдээ үүсгэх цаг болжээ. Энд данс үүсгээрэй. Энэ үнэгүй бөгөөд кредит карт нэмэх шаардлагагүй.

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

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

Одоо, анхны хуудсаа бүтээцгээе! /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 сервер талын рендерингийг дэмждэг. Энэ нь хэрэглэгчийн туршлагыг ихээр сайжруулдаг ба эхлээд орчуулга хийгдээгүй агуулга түр зуур харагдахгүйгээр шууд орчуулагдсан агуулгыг харуулдаг. Мөн хэрэглэгчийн талын сүлжээний хүсэлтүүдийг үүслээс зайлсхийж болно, учир нь бид хэрэглэгч харж буй хуудсанд хэрэгтэй орчуулгуудыг аль хэдийн авчихсан байдаг.

Server side rendering-г тохируулахын тулд /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 компонентийг ашиглан ямар ч мөрийг нэмэхэд автоматаар орчуулагдана. Гэхдээ зөвхөн read/write эрхтэй API түлхүүртэй орчинд л шинэ орчуулга хийх мөрүүдийг үүсгэх боломжтойг анхаарна уу. Бид танд хаалттай, хамгаалалттай staging орчин бий болгохыг зөвлөж байна; энд та үйлдвэрлэлийн програмыг 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!