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

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

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

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