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

Kako svijet postaje sve globalizovaniji, postaje sve važnije za web developere da razvijaju aplikacije koje mogu zadovoljiti korisnike 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 vašu aplikaciju različitim jezicima, valutama i formatima datuma.

U ovom tutorijalu istražićemo kako dodati internacionalizaciju vašoj React Next.js aplikaciji, sa serverskim renderovanjem. TL;DR: Pogledajte cijeli primjer ovdje.

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

Korak 1: Instalirajte i18n biblioteku

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

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

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

npm install tacotranslate

Korak 2: Napravite besplatan TacoTranslate nalog

Sada kada ste instalirali modul, vrijeme je da kreirate svoj TacoTranslate račun, projekat prevođenja i povezane API ključeve. Kreirajte račun ovdje. Besplatno je, i ne zahtijeva unos kreditne kartice.

Unutar TacoTranslate korisničkog interfejsa kreirajte projekat i idite na njegovu karticu za API ključeve. Kreirajte jedan read ključ i jedan read/write ključ. Sačuvat ćemo ih kao varijable okruženja. read ključ nazivamo public, a read/write ključ je secret. Na primjer, možete ih dodati u .env fajl u korijenu vašeg projekta.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

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

Dodati ćemo i još dvije varijable okruženja: TACOTRANSLATE_DEFAULT_LOCALE i TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Zadani kod lokala za rezervnu opciju. U ovom primjeru, postavit ćemo ga na en za engleski jezik.
• TACOTRANSLATE_ORIGIN: "Fascikla" u kojoj će vaši stringovi biti pohranjeni, kao što je URL vaše web stranice. Pročitajte više o originima ovdje.

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

Korak 3: Postavljanje 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 definirati TACOTRANSLATE_API_KEY.

Kreiranje klijenta u zasebnoj datoteci olakšava ponovnu upotrebu 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 strani servera

TacoTranslate omogućava renderovanje sa strane servera vaših prevoda. Ovo znatno poboljšava korisničko iskustvo prikazujući prevedeni sadržaj odmah, umjesto da se prvo pojavi treptaj neprevedenog sadržaja. Dodatno, možemo preskočiti mrežne zahtjeve na klijentu, jer već imamo sve potrebne prevode.

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

Izmijenite provjeru isProduction kako bi odgovarala vašim postavkama. Ako true, TacoTranslate će prikazati javni API ključ. Ako smo u lokalnom, testnom ili staging okruženju (isProduction is false), koristit ćemo tajni read/write API ključ kako bismo bili sigurni da su novi nizovi poslani na prijevod.

Do sada smo samo postavili aplikaciju Next.js sa listom podržanih jezika. Sledeća stvar koju ćemo uraditi je da donesemo prevode za sve tvoje stranice. Da biste to učinili, koristit ćete ili getTacoTranslateStaticProps ili getTacoTranslateServerSideProps na osnovu vaših zahtjeva.

Ove funkcije uzimaju tri argumenta: jedan Next.js Static Props Context objekt, konfiguraciju za TacoTranslate i opcionalne Next.js osobine. Imajte na umu da je revalidate na getTacoTranslateStaticProps postavljen na 60 po defaultu, tako da vaši prijevodi 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 biste trebali moći koristiti 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: Deployajte i testirajte!

Završili smo! 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 moći će kreirati nove nizove za prevođenje. Preporučujemo da imate zatvoreno i sigurno staging okruženje u kojem možete testirati vašu produkcijsku aplikaciju sa takvim API ključem, dodajući nove nizove prije puštanja u rad. Ovo će spriječiti bilo koga da ukrade vaš tajni API ključ i potencijalno zatrpa vaš projekt prevođenja dodavanjem novih, nepovezanih nizova.

Obavezno pogledajte kompletan primjer na našem GitHub profilu. Tamo ćete također pronaći primjer kako to uraditi koristeći App Router! Ako imate bilo kakvih problema, slobodno nam se obratite, i bit ćemo više nego sretni da pomognemo.

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