Најдоброто решение за интернационализација (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-то на вашата веб-страница. Дознајте повеќе за origin-ите тука.

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

Обавезно погледнете го целиот пример на нашиот GitHub профил. Таму ќе најдете и пример како да го направите тоа користејќи го App Router ! Ако наидете на какви било проблеми, слободно контактирајте нè, и ќе бидеме повеќе од среќни да ви помогнеме.

TacoTranslate ви овозможува автоматско локализирање на вашите React апликации брзо на и од било кој јазик. Започнете денес!