Kako implementirati internacionalizaciju u Next.js aplikaciji koja koristi Pages Router

Kako se svet sve više globalizuje, postaje sve važnije za veb developere da prave aplikacije koje mogu da prilagode korisnicima iz različitih zemalja i kultura. Jedan od ključnih načina da se to postigne je kroz internacionalizaciju (i18n), koja vam omogućava da prilagodite svoju aplikaciju različitim jezicima, valutama i formatima datuma.

U ovom tutorijalu ćemo istražiti kako da dodate internacionalizaciju u vašu React Next.js aplikaciju, sa server side renderovanjem. TL;DR: Pogledajte kompletan primer ovde.

Ovaj vodič je za Next.js aplikacije koje koriste Pages Router.
Ako koristite App Router, molimo pogledajte ovaj vodič umesto toga.

Korak 1: Instalirajte i18n biblioteku

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

TacoTranslate automatski prevodi vaše stringove na bilo koji jezik koristeći najsavremeniju AI, i oslobađa vas od zamornog upravljanja JSON fajlovima.

Hajde da ga instaliramo 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 kreditne kartice.

Unutar korisničkog interfejsa aplikacije TacoTranslate, kreirajte projekat i idite na njegovu karticu sa API ključevima. Kreirajte jedan read ključ i jedan read/write ključ. Sačuvaćemo ih kao promenljive okruženja. read ključ zovemo public, a read/write ključ je 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

Obavezno nikada ne otkrivajte tajni read/write API ključ u produkcionim okruženjima na strani klijenta.

Dodaćemo i još dve promenljive okruženja: TACOTRANSLATE_DEFAULT_LOCALE i TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Podrazumevani kod rezervnog lokaliteta. U ovom primeru, postavićemo ga na en za engleski.
• TACOTRANSLATE_ORIGIN: „Folder“ gde će vaši stringovi biti uskladišteni, poput URL adrese 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

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /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, molimo vas da proširite definiciju sa svojstvima i kodom iznad.

Korak 4: Implementacija renderovanja na serverskoj strani

TacoTranslate omogućava renderovanje prevoda na serverskoj strani. Ovo značajno poboljšava korisničko iskustvo prikazivanjem prevedenog sadržaja odmah, umesto što prvo pokaže bljesak neprevedenog sadržaja. Pored toga, možemo izbeći mrežne zahteve na klijentskoj strani, jer već imamo sve potrebne prevode.

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

Izmenite proveru isProduction tako da odgovara vašem podešavanju. Ako true, TacoTranslate će se pojaviti javni API ključ. Ako smo u lokalnom, testnom ili pripremnom okruženju (isProduction is false), koristićemo tajni read/write API ključ kako bismo bili sigurni da se novi nizovi šalju na prevod.

Do sada smo podesili samo Next.js aplikaciju sa listom podržanih jezika. Sledeća stvar koju ćemo uraditi je da dohvatimo prevode za sve vaše stranice. Da biste to uradili, koristićete ili getTacoTranslateStaticProps ili getTacoTranslateServerSideProps na osnovu vaših zahteva.

Ove funkcije uzimaju tri argumenta: Jedan Next.js Static Props Context objekat, konfiguracija za TacoTranslate i opciona svojstva Next.js. Imajte na umu da je revalidate na getTacoTranslateStaticProps je podrazumevano postavljen na 60, tako da vaši prevodi ostanu ažurni.

Da biste koristili bilo koju funkciju na stranici, pretpostavimo da imate datoteku stranice kao što je /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 treba da možete da koristite Translate komponentu za prevođenje stringova unutar svih vaših React komponenti.

import {Translate} from 'tacotranslate/react';

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

Korak 5: Objavi i testiraj!

Gotovo je! Vaša React aplikacija će sada biti automatski prevedena kada dodate bilo koje nizove u Translate komponentu. Imajte na umu da samo okruženja sa read/write dozvolama na API ključu mogu kreirati nove nizove za prevođenje. Preporučujemo da imate zatvoreno i sigurno staging okruženje u kome možete testirati vašu produkcijsku aplikaciju sa takvim API ključem, dodajući nove nizove pre nego što aplikaciju pustite u rad. Ovo će sprečiti bilo koga da ukrade vaš tajni API ključ i potencijalno napuči vaš projekat prevođenja dodavanjem novih, nepovezanih nizova.

Budite sigurni da pogledate kompletan primer na našem GitHub profilu. Tamo ćete takođe pronaći primer kako to uraditi koristeći App Router ! Ako budete imali bilo kakvih problema, slobodno nam se obratite, i biće nam zadovoljstvo da pomognemo.

TacoTranslate vam omogućava da automatski lokalizujete vaše React aplikacije brzo na i sa bilo kog jezika. Počnite danas!