Next.js аппликейшнүүдийн олон улсын (i18n) хэрэгцээнд зориулсан хамгийн сайн шийдэл

Яаж ажилладаг вэ

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

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

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

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

Next.js аппликейшндээ олон хэлийн дэмжлэг (internationalization) нэвтрүүлэхийн тулд эхлээд 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. Энд origin-уудын талаар дэлгэрэнгүй уншаарай.

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!"/>;
}

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

import {Translate} from 'tacotranslate/react';

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

5-р алхам: Хэрэгжүүлэн байршуулж, туршиж үзнэ үү!

Бид бэлэн боллоо! Таны Next.js аппликейшн дахь 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 App 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!