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 түлхүүрийг харуулна. Хэрэв бид орон нутгийн, тестийн эсвэл 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!"/>;
}

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

import {Translate} from 'tacotranslate/react';

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

Алхам 5: Хэрэгжүүлж туршина уу!

Бид дууслаа! Одоо та ямарч мөрийг Translate бүрэлдэхүүнд нэмэхэд таны React програм автоматаар орчуулагдах болно. Зөвхөн read/write эрхтэй API түлхүүр бүхий орчинд шинэ орчуулга хийх мөрүүдийг үүсгэх боломжтойг анхаарна уу. Бид үйлдвэрлэлийн програмыг турших зориулалттай хаалттай, аюулгүй байдлын шатад орчинтой байхыг зөвлөж байна. Тэнд API түлхүүртэйгээр шинэ мөрүүдийг амилуулахын өмнө нэмэж болно. Ингэснээр таны нууц API түлхүүр хулгайлагдахаас сэргийлж, орчуулгын төслийг шинэ, холбоогүй мөрүүдээр хавтгайруулахыг урьдчилан сэргийлнэ.

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

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