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 қосымшасының интерфейсінде жоба жасап, оның 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 баптау

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /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 қосымшаларыңызды кез келген тілге және кез келген тілден автоматты түрде жылдам аударуға мүмкіндік береді. Бүгіннен бастап бастаңыз!