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

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

Әлем жаһанданған сайын веб-әзірлеушілерге әртүрлі елдер мен мәдениеттердегі қолданушыларға сәйкес келетін қосымшаларды құру маңыздырақ бола түседі. Оны жүзеге асырудың негізгі әдістерінің бірі — интернационалдандыру (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: Сіздің мәтіндеріңіз сақталатын «қалтa», мысалы веб-сайтыңыздың 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 кілтін көрсетеді. Егер біз жергілікті, сынақ немесе staging ортасында болсақ (isProduction is false), жаңа жолдардың аудармаға жіберілуін қамтамасыз ету үшін құпия read/write API кілтін қолданамыз.

Қазірге дейін біз Next.js қолданбасын тек қолдау көрсетілетін тілдердің тізімімен баптадық. Келесі қадам — барлық беттеріңізге арналған аудармаларды алу. Мұны істеу үшін талаптарыңызға байланысты getTacoTranslateStaticProps немесе getTacoTranslateServerSideProps функциясын пайдаланасыз.

Осы функциялар үш аргументті қабылдайды: біреуі Next.js Static Props Context объектісі, TacoTranslate конфигурациясы және міндетті емес Next.js қасиеттері. Ескеріңіз, revalidate параметрі getTacoTranslateStaticProps үшін әдепкі бойынша 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 кілтімен өндірістік қосымшаңызды сынақтап, жарияламас бұрын жаңа жолдарды қосу үшін жабық және қауіпсіз staging ортасын ұстауды ұсынамыз. Бұл сіздің құпия 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!