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

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

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

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

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

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

TacoTranslate нь хамгийн сүүлийн үеийн хиймэл оюун ухааны тусламжтайгаар таны бичвэрүүдийг ямар ч хэл рүү автоматаар орчуулж, таныг 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_DEFAULT_LOCALE ?? '',
});

module.exports = tacoTranslate;

Бид удахгүй автоматаар TACOTRANSLATE_API_KEY -г тодорхойлох болно.

Клиентыг тусдаа файлд үүсгэснээр дараа дахин ашиглахад хялбар болдог. Одоо, тохируулсан /pages/_app.tsx ашиглан бид TacoTranslate провайдерийг нэмнэ.

import React from 'react';
import {type AppProps} from 'next/app';
import {type Origin, type Locale, type Localizations} from 'tacotranslate';
import TacoTranslate from 'tacotranslate/react';
import TacoTranslateHead from 'tacotranslate/next/head';
import tacoTranslate from '../tacotranslate-client';

type PageProperties = {
	origin: Origin;
	locale: Locale;
	locales: Locale[];
	localizations: Localizations;
};

export default function App({Component, pageProps}: AppProps<PageProperties>) {
	const {origin, locale, locales, localizations} = pageProps;

	return (
		<TacoTranslate
			client={tacoTranslate}
			origin={origin}
			locale={locale}
			localizations={localizations}
		>
			<TacoTranslateHead rootUrl="https://your-website.com" locales={locales} />
			<Component {...pageProps} />
		</TacoTranslate>
	);
}

Хэрэв танд аль хэдийн өөрчилсөн pageProps болон _app.tsx байгаа бол дээрх шинж чанар ба кодыг тодорхойлолтод нэмнэ үү.

Алхам 4: Сервер талын үүсгэхийг хэрэгжүүлэх

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

Бид эхлээд /next.config.js файлыг үүсгэх эсвэл засварлах болно.

const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslateClient = require('./tacotranslate-client');

module.exports = async () => {
	const config = {};

	return withTacoTranslate(config, {
		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'),
	});
};

Өөрийн зохион байгуулалтад тохируулан isProduction шалгалтыг өөрчил. Хэрэв trueбайвал TacoTranslate олон нийтийн API түлхүүрийг ил гаргана. Хэрвээ бид local, test эсвэл staging орчинд (isProduction is falseбайвал шинэ мөрүүдийг орчуулахаар илгээхийн тулд нууц read/write API түлхүүрийг ашиглана.

Одоогоор бид Next.js програмыг зөвхөн дэмжигдсэн хэлний жагсаалттай тохируулсан байна. Дараагийн хийх зүйл бол таны бүх хуудсуудын орчуулгыг татах явдал юм. Үүнийг хийхийн тулд таны шаардлагад нийцүүлэн getTacoTranslateStaticProps эсвэл getTacoTranslateServerSideProps функцийг ашиглана уу.

Эдгээр функцууд нь гурван параметр авдаг: Нэг Next.js Static Props Context объект, TacoTranslate-ийн тохиргоо, мөн сонголттой Next.js шинж чанарууд. getTacoTranslateStaticProps дахь revalidate нь анхдагчаар 60 гэж тохируулагдсан бөгөөд ингэснээр таны орчуулгууд шинэчлэгдэж байдаг.

Эдгээр функцийг хуудсанд ашиглахын тулд, таныг дараах шиг хуудсны файлтай гэж авч үзье: /pages/hello-world.tsx.

import {Translate} from 'tacotranslate/react';
import getTacoTranslateStaticProps from 'tacotranslate/next/get-static-props';
import tacoTranslateClient from '../tacotranslate-client';

export async function getStaticProps(context) {
	return getTacoTranslateStaticProps(context, {client: tacoTranslateClient});
}

export default function Page() {
	return <Translate string="Hello, world!"/>;
}

Одоо та өөрийн бүх React бүрэлдэхүүн хэсгүүд доторх тэмдэгтүүдийг орчуулахын тулд Translate бүрэлдэхүүн хэсгийг ашиглах боломжтой болсон байх ёстой.

import {Translate} from 'tacotranslate/react';

function Component() {
	return <Translate string="Hello, world!"/>
}

Алхам 5: Тархаж, шалгаарай!

Бид дууссан! Одоо таны React аппликейшнд ямар ч мөр нэмэхэд Translate компонент автоматаар орчуулагдах болно. Анхааруулга: зөвхөн API түлхүүрийн read/write эрхтэй орчныг ашиглан шинэ орчуулга үүсгэх боломжтой. Бид танд API түлхүүртэй хаалттай, хамгаалагдсан staging орчинг бий болгохыг зөвлөж байна, ингэснээр та үйлдвэрлэлийн аппликейшнийг шалгаж, амьдралд гарахаасаа өмнө шинэ мөрүүдийг нэмж болно. Энэ нь таны нууц API түлхүүрийг хэн нэгэн хулгайлахгүй байхыг болон таны орчуулгын төслийг холбоогүй шинэ мөрүүдээр дүүргэхээс сэргийлнэ.

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

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