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 таны бичвэрүүдийг дэвшилтэт 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 нь зарим бүтээгдсэн алдааг шалгах логиктой энгийн туслах функц юм. Одоо, /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!" />
	);
}

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

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!