Како да имплементирате интернационализација во Next.js апликација која користи Pages Router

Како што светот станува се повеќе глобализиран, станува сè поважно веб-разработувачите да градат апликации што можат да ги задоволат корисниците од различни земји и култури. Еден од клучните начини за постигнување на ова е преку интернационализација (i18n), што ви овозможува да ја прилагодите вашата апликација на различни јазици, валути и формати на датуми.

Во овој туторијал, ќе истражуваме како да додадете интернационализација на вашата React Next.js апликација, со серверска страна на рендерирање. TL;DR: Погледнете го целосниот пример тука.

Овој водич е наменет за Next.js апликации кои користат Pages Router.
Ако користите 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-то на вашата веб-страница. Дознајте повеќе за 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 клуч. Ако се наоѓаме во локална, тест или преодна околина (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!"/>;
}

Сега треба да можете да ја користите компонентата Translate за да ги преведувате низите во сите ваши React компоненти.

import {Translate} from 'tacotranslate/react';

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

Чекор 5: Деплојирајте и тестирајте!

Готови сме! Вашата React апликација сега ќе се преведува автоматски кога ќе додадете било кои низи во Translate компонентата. Имајте на ум дека само средини со дозволи read/write за API клучот ќе можат да создаваат нови низи за превод. Препорачуваме да имате затворена и обезбедена средина за тестирање (staging) каде што можете да ја тестирате апликацијата во продукција со таков API клуч, додавајќи нови низи пред објавувањето. Ова ќе спречи некој да го украде вашиот таен API клуч и потенцијално да го натрупа вашиот проект за превод со додавање нови, несродни низи.

Обавезно погледајте го целосниот пример на нашиот GitHub профил. Таму, исто така, ќе најдете пример како да го направите ова користејќи го App Router! Ако наидете на какви било проблеми, слободно контактирајте не, и ќе бидеме повеќе од среќни да помогнеме.

TacoTranslate ви овозможува автоматски да ги локализирате вашите React апликации брзо од и на повеќе од 75 јазици. Започнете денес!