Pages Router пайдаланатын Next.js қосымшасында интернационализацияны қалай жүзеге асыруға болады

Әлем жаһанданған сайын, веб-әзірлеушілерге әр түрлі елдер мен мәдениеттердегі пайдаланушыларға сәйкес келетін қосымшаларды жасау маңыздырақ болуда. Мұны жүзеге асырудың басты жолдарының бірі — халықаралықтандыру (i18n), ол қосымшаңызды әр түрлі тілдерге, валюталарға және күн форматтарына бейімдеуге мүмкіндік береді.

Бұл нұсқаулықта біз React Next.js қосымшаңызға сервер жағындағы рендерингпен халықаралықтандыруды қалай қосуға болатынын қарастырамыз. TL;DR: Толық мысалды осында көріңіз.

Бұл нұсқаулық Pages Router қолданатын Next.js қосымшалары үшін.
Егер сіз App Router қолдансаңыз, оның орнына осы нұсқаулықты қараңыз.

1-қадам: i18n кітапханасын орнатыңыз

Next.js қолданбаңызда халықаралықтандыруды (i18n) жүзеге асыру үшін алдымен i18n кітапханасын таңдаймыз. Көптеген танымал кітапханалар бар, соның ішінде next-intl. Алайда, осы мысалда біз TacoTranslate-ды пайдаланамыз.

TacoTranslate озық жасанды интеллект (AI) көмегімен мәтіндеріңізді кез келген тілге автоматты түрде аударады және JSON файлдарын жалықтыратын басқарудан босатады.

Оны терминалыңызда npm арқылы орнатайық:

npm install tacotranslate

2-қадам: TacoTranslate-те тегін тіркелгі жасаңыз

Енді модуль орнатылғандықтан, TacoTranslate тіркелгісін, аударма жобасын және онымен байланысты API кілттерін жасауға уақыт келді. Мұнда тіркеліңіз. Бұл тегін, және несие картасын енгізуді талап етпейді.

TacoTranslate қолданба интерфейсінде жоба құрып, оның 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-мекенжайы. Origins туралы толығырақ оқыңыз.

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 кілтін көрсетеді. Егер біз жергілікті, тестілеу немесе сынақ ортада болсаңыз (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-қадам: Орнатып, тексеріңіз!

Біз бітірдік! Енді Translate компонентіне кез келген мәтінді қосқанда сіздің React қосымшаңыз автоматты түрде аударылады. Назар аударыңыз: API кілтіне read/write рұқсаттары берілген орта ғана аудару үшін жаңа мәтіндер жасай алады. Осындай API кілтімен өндірістік қосымшаңызды сынап, іске қосар алдында жаңа мәтіндер қосып отыра алатын жабық және қорғалған staging ортасын ұстауды ұсынамыз. Бұл сіздің құпия API кілтіңіздің ұрлануына жол бермейді және басқа қатысы жоқ жаңа мәтіндер қосылып, аударма жобасын қажетсіз түрде үлкейтуден сақтайды.

Әрине, толық мысалды қарап шығыңыз біздің GitHub профилімізде. Сол жерде App Router қолдану арқылы мұны қалай жасауға болатыны туралы мысалды да таба аласыз! Егер қандай да бір қиындықтар кездессе, еркін хабарласыңыз, біз қуана көмектесеміз.

TacoTranslate сіздің React қолданбаларыңызды 75-тен астам тілге және сол тілдерден автоматты түрде тез локализациялауға мүмкіндік береді. Қазір бастаңыз!