Како да се имплементира интернационализација во 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-то на вашата веб-страница. Прочитајте повеќе за 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!"/>;
}

Сега треба да можете да ја користите компонентата 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 јазици. Започнете денес!