Сургалт
May 04

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

Таны React програмыг илүү хүртээмжтэй болгож, олон улсынжуулалтын (i18n) тусламжтайгаар шинэ зах зээлд хүрээрэй.

Дэлхий улам бүр глобалчлан хөгжиж байгаа тул вэб хөгжүүлэгчдэд өөр өөр улс орон, соёлын хэрэглэгчдэд зориулсан програм хангамж бүтээх нь улам чухал болж байна. Үүний гол арга замуудын нэг нь олон улсын хэрэглээний дэмжлэг (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 түлхүүр үүсгээрэй. Бид эдгээрийг орчны хувьсагч болгон хадгална. read түлхүүрийг бид public гэж нэрлэдэг бол read/write түлхүүр нь secret юм. Жишээлбэл, эдгээрийг төслийн үндсэн хавтас дахь .env файлд нэмэж болно.

.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 зэрэг. Энд гарал үүслийн талаар илүү их уншаарай.
.env
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

3-р алхам: TacoTranslate-ийг тохируулах

TacoTranslate-ийг таны програмтай нэгтгэхийн тулд өмнө авсан API түлхүүрүүдийг ашиглан клиент үүсгэх шаардлагатай. Жишээлбэл, /tacotranslate-client.js нэртэй файл үүсгээрэй.

/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 провайдерыг хэрэгжүүлнэ.

/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] нь динамик параметр юм гэдгийг анхаарна уу.

/app/[locale]/layout.tsx
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 нэртэй файлыг үүсгээрэй.

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

Server side rendering тохируулахын тулд /next.config.js файлыг үүсгэх эсвэл засварлах хэрэгтэй:

/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 ашиглан хэрэглэгчдийг тэдний дуртай хэл дээр үзүүлж байгаа хуудсанд чиглүүлэх боломжтой.

/middleware.ts
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!

Nattskiftet-аас гаралтай бүтээгдэхүүнНорвегид бүтээгдсэн