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

Готово! Вашата 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!