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

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

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 нь зөвхөн зарим дотоод алдааны боловсруулалттай хэрэглээний функц юм. Одоо, бид TacoTranslate провайдерыг хэрэгжүүлэх зориулалттай /app/[locale]/tacotranslate.tsx нэртэй файлыг үүсгээрэй.

'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!" />
	);
}

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 бүрэлдэхүүнд ямар нэг мөр нэмэхэд автоматаар орчуулагдах болно. Зөвхөн read/write эрхтэй API түлхүүр бүхий орчинд л шинэ орчуулах мөрүүдийг үүсгэх боломжтой гэдгийг анхаарна уу. Бид танд хаалттай, аюулгүй staging орчинтой байж, үйлдвэрлэлийн API түлхүүр ашиглан програмыг шалгаж, шинэ мөрүүдийг орчуулахад амьдралд орохоос өмнө нэмэхийг зөвлөж байна. Ингэснээр таны нууц API түлхүүрийг хулгайлах, болон орчуулгын төсөлд холбоогүй шинэ мөрүүдийг нэмснээр өргөжихөөс сэргийлнэ.

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

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