Најдоброто решение за интернационализација (i18n) во Next.js апликации

Како работи

Како што светот станува сè повеќе глобализиран, сè поважно е веб-разработувачите да создаваат апликации кои можат да ги задоволат корисниците од различни земји и култури. Еден од клучните начини за тоа е интернационализацијата (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), ќе го користиме тајниот API клуч read/write за да се осигураме дека новите низи се испраќаат за превод.

До сега, ние само ја поставивме 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: Деплојирајте и тествајте!

Готово! Вашата Next.js апликација сега ќе се преведува автоматски кога ќе додадете било каков текст во компонентата Translate. Имајте на ум дека само средини со дозволи read/write на API клучот ќе можат да создаваат нови текстови за превод. Препорачуваме да имате затворена и обезбедена (staging) средина каде што можете да ја тестирате вашата продукциска апликација со таков 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!