Како да се имплементира интернационализација во апликација на 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 автоматски ги преведува вашите низи на било кој јазик користејќи напредна AI технологија, и ве ослободува од здодевното рачно управување со 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

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: Имплементација на серверско генерирање на содржина (server side rendering)

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