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

Како функционира

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

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