Najbolje rešenje za internacionalizaciju (i18n) u Next.js aplikacijama

Kako funkcioniše

Kako svet postaje sve globalizovaniji, sve je važnije da veb programeri prave aplikacije koje mogu da zadovolje korisnike iz različitih zemalja i kultura. Jedan od ključnih načina da se to postigne je internacionalizacija (i18n), koja vam omogućava da prilagodite svoju aplikaciju različitim jezicima, valutama i formatima datuma.

U ovom tutorijalu istražićemo kako da dodate internacionalizaciju svojoj React Next.js aplikaciji, uz renderovanje na serverskoj strani. TL;DR: Pogledajte kompletan primer ovde.

Ovo uputstvo je za Next.js aplikacije koje koriste Pages Router.
Ako koristite App Router, umesto toga pogledajte ovo uputstvo.

Korak 1: Instalirajte i18n biblioteku

Da bismo implementirali internacionalizaciju u vašu Next.js aplikaciju, prvo ćemo odabrati i18n biblioteku. Postoji nekoliko popularnih biblioteka, uključujući next-intl. Međutim, u ovom primeru koristićemo TacoTranslate.

TacoTranslate automatski prevodi vaše stringove na bilo koji jezik koristeći najsavremeniju veštačku inteligenciju i oslobađa vas zamornog upravljanja JSON fajlovima.

Instalirajmo ga koristeći npm u vašem terminalu:

npm install tacotranslate

Korak 2: Kreirajte besplatan TacoTranslate nalog

Sada kada ste instalirali modul, vreme je da kreirate svoj TacoTranslate nalog, projekat za prevod i pripadajuće API ključeve. Kreirajte nalog ovde. Besplatno je i ne zahteva unošenje broja kreditne kartice.

U korisničkom interfejsu aplikacije TacoTranslate kreirajte projekat i otvorite karticu API ključeva. Kreirajte jedan read ključ i jedan read/write ključ. Sačuvaćemo ih kao promenljive okruženja. read ključ nazivamo public, a read/write ključ nazivamo secret. Na primer, možete ih dodati u .env fajl u korenu vašeg projekta.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Pazite da nikada ne otkrijete tajni read/write API ključ u produkcionim okruženjima na strani klijenta.

Takođe ćemo dodati još dve promenljive okruženja: TACOTRANSLATE_DEFAULT_LOCALE i TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Podrazumevani kod lokaliteta koji se koristi kao rezervni. U ovom primeru postavićemo ga na en za engleski.
• TACOTRANSLATE_ORIGIN: “folder” u kojem će biti smešteni vaši stringovi, kao što je URL vašeg sajta. Pročitajte više o originima ovde.

TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

Korak 3: Podešavanje TacoTranslate-a

Da biste integrisali TacoTranslate u svoju aplikaciju, moraćete da napravite klijenta koristeći API ključeve iz ranijeg koraka. Na primer, kreirajte fajl nazvan /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;

Uskoro ćemo automatski definisati TACOTRANSLATE_API_KEY.

Kreiranje klijenta u zasebnoj datoteci olakšava njegovo ponovno korišćenje kasnije. Sada, koristeći prilagođeni /pages/_app.tsx, dodaćemo TacoTranslate provajder.

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>
	);
}

Ako već imate prilagođene pageProps i _app.tsx, proširite definiciju sa svojstvima i kodom navedenim iznad.

Korak 4: Implementacija renderovanja na serverskoj strani

TacoTranslate omogućava renderovanje prevoda na serverskoj strani. To značajno poboljšava korisničko iskustvo tako što prikazuje prevedeni sadržaj odmah, umesto kratkog prikaza neprevedenog sadržaja. Pored toga, možemo izbeći mrežne zahteve na klijentu, jer već imamo sve potrebne prevode.

Počećemo kreiranjem ili izmenom /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'),
	});
};

Prilagodite proveru isProduction svom okruženju. Ako je true, TacoTranslate će prikazati javni API ključ. Ako se nalazimo u lokalnom, testnom ili staging okruženju (isProduction is false), koristićemo tajni read/write API ključ kako bismo osigurali da su novi stringovi poslati na prevođenje.

Do sada smo Next.js aplikaciju podesili samo sa listom podržanih jezika. Sledeće što ćemo uraditi je da dohvatimo prevode za sve vaše stranice. Za to ćete koristiti ili getTacoTranslateStaticProps ili getTacoTranslateServerSideProps u zavisnosti od vaših zahteva.

Ove funkcije primaju три аргумента: један 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!"/>;
}

Sada biste trebalo da možete da koristite Translate komponentu za prevođenje stringova u svim vašim React komponentama.

import {Translate} from 'tacotranslate/react';

function Component() {
	return <Translate string="Hello, world!"/>
}

Korak 5: Objavite i testirajte!

Završili smo! Vaša Next.js aplikacija će se sada automatski prevoditi kada dodate bilo koji string u komponentu Translate. Imajte na umu da će samo okruženja sa dozvolama read/write na API ključu moći da kreiraju nove stringove za prevođenje. Preporučujemo da imate zatvoreno i osigurano staging okruženje u kojem možete testirati svoju produkcijsku aplikaciju koristeći takav API ključ, dodajući nove stringove pre lansiranja. To će sprečiti bilo koga da ukrade vaš tajni API ključ i potencijalno povećati obim vašeg prevodilačkog projekta dodavanjem novih, nepovezanih stringova.

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!