Најдоброто решение за интернационализација (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: Подразумеваниот код на резервен (fallback) локал. Во овој пример, ќе го поставиме на 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 клуч. Ако сме во локално, тест или стејџинг опкружување (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 клучот ќе можат да создаваат нови низи за превод. Препорачуваме да имате затворено и обезбедено тестно окружување каде можете да ја тестирате вашата продукциска апликација со таков 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!