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

Kao što svijet postaje sve globaliziraniji, sve je važnije da web programeri razvijaju aplikacije koje mogu zadovoljiti korisnike iz različitih zemalja i kultura. Jedan od ključnih načina za to je internacionalizacija (i18n), koja vam omogućava da prilagodite svoju aplikaciju različitim jezicima, valutama i formatima datuma.

U ovom tutorijalu istražit ćemo kako dodati internacionalizaciju u vašu React Next.js aplikaciju, uz renderiranje na serverskoj strani. TL;DR: Pogledajte cijeli primjer ovdje.

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

Korak 1: Instalirajte biblioteku za i18n

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 koristit ćemo TacoTranslate.

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

Instalirajmo ga koristeći npm u terminalu:

npm install tacotranslate

Korak 2: Kreirajte besplatan TacoTranslate račun

Sada kada imate instaliran modul, vrijeme je da kreirete svoj TacoTranslate račun, projekat za prevođenje i pripadajuće API ključeve. Kreirajte račun ovdje. Besplatno je i ne zahtijeva da unesete kreditnu karticu.

U korisničkom sučelju aplikacije TacoTranslate, kreirajte projekt i otvorite karticu za API ključeve. Napravite jedan read ključ i jedan read/write ključ. Sačuvat ćemo ih kao varijable okruženja. Ključ read je ono što zovemo public, a ključ read/write je secret. Na primjer, možete ih dodati u .env datoteku u korijenu vašeg projekta.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

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

Također ćemo dodati još dvije varijable okruženja: TACOTRANSLATE_DEFAULT_LOCALE i TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Zadani kod rezervne lokalizacije. U ovom primjeru, postavit ćemo ga na en za engleski.
• TACOTRANSLATE_ORIGIN: “folder” u kojem će biti pohranjeni vaši stringovi, 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-a

Da biste integrirali TacoTranslate u svoju aplikaciju, trebat ćete kreirati klijenta koristeći API ključeve koje ste ranije dobili. Na primjer, kreirajte datoteku nazvanu /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 njegovo kasnije ponovno korištenje. Sada, koristeći prilagođeni /pages/_app.tsx, dodati ćemo TacoTranslate provajdera.

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 proširite definiciju svojstvima i kodom iznad.

Korak 4: Implementacija renderiranja na strani servera

TacoTranslate omogućava renderiranje prijevoda na strani poslužitelja. To znatno poboljšava korisničko iskustvo jer odmah prikazuje prevedeni sadržaj, umjesto kratkog prikaza neprevedenog sadržaja na početku. Osim toga, možemo izostaviti mrežne zahtjeve na klijentu, jer već imamo sve potrebne prijevode.

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

Prilagodite provjeru isProduction svojim postavkama. Ako je true, TacoTranslate će prikazati javni API ključ. Ako se nalazimo u lokalnom, testnom ili staging okruženju (isProduction is false), koristit ćemo tajni read/write API ključ kako bismo osigurali da se novi stringovi pošalju na prevođenje.

Do sada smo u Next.js aplikaciju postavili samo listu podržanih jezika. Sljedeće ćemo dohvatiti prijevode za sve vaše stranice. Da biste to uradili, koristit ćete ili getTacoTranslateStaticProps ili getTacoTranslateServerSideProps ovisno o vašim zahtjevima.

Ove funkcije primaju tri argumenta: jedan Next.js Static Props Context objekt, konfiguraciju za TacoTranslate i opcionalna Next.js svojstva. Imajte na umu da je revalidate na getTacoTranslateStaticProps postavljen na 60 prema zadanim postavkama, tako da vaši prijevodi ostanu ažurni.

Da biste koristili bilo koju od ovih funkcija na stranici, pretpostavimo da imate datoteku stranice poput /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 u svim vašim React komponentama.

import {Translate} from 'tacotranslate/react';

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

Korak 5: Objavite i testirajte!

Gotovo! Vaša React aplikacija će se sada automatski prevoditi kada dodate bilo koje stringove u komponentu Translate. Imajte na umu da će samo okruženja koja imaju dopuštenja read/write na API ključu moći kreirati nove stringove za prevođenje. Preporučujemo da imate zatvoreno i osigurano staging okruženje u kojem možete testirati vašu produkcijsku aplikaciju s takvim API ključem, dodajući nove stringove prije puštanja u produkciju. Ovo će spriječiti bilo koga da ukrade vaš tajni API ključ i potencijalno preopteretiti vaš projekat prevođenja dodavanjem novih, nepovezanih stringova.

Obavezno pogledajte kompletan primjer na našem GitHub profilu. Tamo ćete također pronaći primjer kako to uraditi koristeći App Router! Ako naiđete na bilo kakve probleme, slobodno nam se obratite, i rado ćemo pomoći.

TacoTranslate vam omogućava automatsku lokalizaciju vaših React aplikacija brzo na i s više od 75 jezika. Započnite danas!