Next.js қосымшаларында халықаралықтандыру (i18n) үшін ең жақсы шешім

Қалай жұмыс істейді

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

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

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

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

Next.js қолданбаңызда халықаралықтандыруды (i18n) енгізу үшін алдымен 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 мекенжайы. 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-қадам: Орнату және тексеру!

Біз біттік! Енді сіз Translate компонентіне кез келген жолдарды қосқанда, сіздің Next.js қосымшаңыз автоматты түрде аударылады. Назар аударыңыз: 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!