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

Kako se svijet sve više globalizira, sve je važnije da web programeri izrađuju aplikacije koje mogu odgovarati korisnicima iz različitih zemalja i kultura. Jedan od ključnih načina da se to postigne je internacionalizacija (i18n), koja vam omogućuje prilagodbu aplikacije različitim jezicima, valutama i formatima datuma.

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

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

Korak 1: Instalirajte i18n knjižnicu

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 nizove na bilo koji jezik koristeći najsuvremeniju umjetnu inteligenciju i oslobađa vas od zamornog upravljanja JSON datotekama.

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

npm install tacotranslate

Korak 2: Stvorite besplatan TacoTranslate račun

Sada kada ste instalirali modul, vrijeme je da kreirate svoj TacoTranslate račun, projekt za prijevod i povezane API ključeve. Kreirajte račun ovdje. Besplatno je i ne zahtijeva da dodate kreditnu karticu.

U korisničkom sučelju aplikacije TacoTranslate kreirajte projekt i otvorite karticu API ključeva. Kreirajte jedan read ključ i jedan read/write ključ. Spremit ćemo ih kao varijable okruženja. Ključ read nazivamo public, a ključ read/write nazivamo secret. Na primjer, možete ih dodati u datoteku .env 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 (fallback) lokalizacije. U ovom primjeru postavit ćemo ga na en za engleski.
• TACOTRANSLATE_ORIGIN: „mapa” u kojoj će se pohranjivati vaši stringovi, poput URL-a vaše web-stranice. Pročitajte više o originima ovdje.

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

Korak 3: Postavljanje TacoTranslatea

Da biste integrirali TacoTranslate u svoju aplikaciju, trebat ćete stvoriti klijenta koristeći API ključeve iz prethodnog koraka. Na primjer, stvorite 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 ponovno korištenje kasnije. Sada, koristeći prilagođeni /pages/_app.tsx, dodati ćemo TacoTranslate provider.

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 s gore navedenim svojstvima i kodom.

Korak 4: Implementacija renderiranja na strani poslužitelja

TacoTranslate omogućuje renderiranje vaših prijevoda na strani poslužitelja. To znatno poboljšava korisničko iskustvo jer se prevedeni sadržaj prikazuje odmah, umjesto da se prvo pojavi kratki prikaz neprevedenog sadržaja. Osim toga, možemo preskočiti mrežne zahtjeve na strani klijenta, jer već imamo sve potrebne prijevode.

Počet ćemo stvaranjem 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 svojoj konfiguraciji. Ako je true, TacoTranslate će prikazati javni API ključ. Ako se nalazimo u lokalnom, testnom ili staging okruženju (isProduction is false), upotrijebit ćemo tajni API ključ read/write kako bismo osigurali da se novi stringovi pošalju na prevođenje.

Do sada smo Next.js aplikaciju postavili samo s popisom podržanih jezika. Sljedeće što ćemo učiniti jest dohvatiti prijevode za sve vaše stranice. Za to ćete koristiti ili getTacoTranslateStaticProps ili getTacoTranslateServerSideProps ovisno o vašim zahtjevima.

Ove funkcije prihvaćaju tri argumenta: jedan Next.js Static Props Context objekt, konfiguraciju za TacoTranslate i izborna Next.js svojstva. Imajte na umu da je revalidate na getTacoTranslateStaticProps prema zadanim postavkama postavljen na 60, kako bi vaši prijevodi ostali ažurni.

Za korištenje bilo koje 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 nizova unutar svih vaših React komponenti.

import {Translate} from 'tacotranslate/react';

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

Korak 5: Objavite i testirajte!

Gotovi smo! Vaša React aplikacija će se sada automatski prevoditi kad u komponentu Translate dodate bilo koji tekst. Imajte na umu da će samo okruženja s dopuštenjima read/write na API ključu moći stvarati nove stringove za prijevod. Preporučujemo da imate zatvoreno i osigurano staging okruženje u kojem možete testirati svoju produkcijsku aplikaciju s takvim API ključem, dodajući nove stringove prije puštanja u rad. Time ćete spriječiti da itko ukrade vaš tajni API ključ i potencijalno napuhati vaš projekt prijevoda dodavanjem novih, nepovezanih stringova.

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

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