Paras ratkaisu kansainvälistämiseen (i18n) Next.js-sovelluksissa

Miten se toimii

Maailman muuttuessa yhä globaalimmaksi, on web-kehittäjille entistä tärkeämpää rakentaa sovelluksia, jotka palvelevat eri maiden ja kulttuurien käyttäjiä. Yksi keskeisimmistä keinoista tämän saavuttamiseksi on kansainvälistäminen (i18n), jonka avulla voit sovittaa sovelluksesi eri kielille, valuutoille ja päivämäärämuodoille.

Tässä ohjeessa tutkimme, miten lisätä kansainvälistäminen React Next.js -sovellukseesi palvelinpuolen renderöinnillä. TL;DR: Katso koko esimerkki tästä.

Tämä opas on tarkoitettu Next.js sovelluksille, jotka käyttävät Pages Router.
Jos käytät App Router, katso sen sijaan tämä opas.

Vaihe 1: Asenna i18n-kirjasto

Kansainvälisyyden (i18n) toteuttamiseksi Next.js-sovelluksessasi valitsemme ensin i18n-kirjaston. On olemassa useita suosittuja kirjastoja, mukaan lukien next-intl. Tässä esimerkissä käytämme kuitenkin TacoTranslate.

TacoTranslate kääntää merkkijonosi automaattisesti mihin tahansa kieleen huippuluokan tekoälyn avulla ja vapauttaa sinut JSON-tiedostojen työläästä hallinnasta.

Asennetaan se käyttämällä npm terminaalissasi:

npm install tacotranslate

Vaihe 2: Luo ilmainen TacoTranslate-tili

Nyt kun sinulla on moduuli asennettuna, on aika luoda TacoTranslate-tilisi, käännösprojekti ja niihin liittyvät API-avaimet. Luo tili tästä. Se on ilmaista, eikä vaadi luottokortin lisäämistä.

TacoTranslate-sovelluksen käyttöliittymässä luo projekti ja siirry sen API-avaimet-välilehdelle. Luo yksi read avain ja yksi read/write avain. Tallennamme ne ympäristömuuttujina. read avainta kutsumme public ja read/write avain on secret. Esimerkiksi voit lisätä ne .env -tiedostoon projektisi juurihakemistossa.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Varmista, ettet koskaan vuoda salaista read/write API-avainta asiakaspuolen tuotantoympäristöihin.

Lisäämme myös kaksi ympäristömuuttujaa: TACOTRANSLATE_DEFAULT_LOCALE ja TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Oletusarvoinen varakohtelokoodi. Tässä esimerkissä asetamme sen arvoon en eli englanti.
• TACOTRANSLATE_ORIGIN: ”Kansio”, johon merkkijonosi tallennetaan, kuten verkkosivustosi URL-osoite. Lue lisää origenista tästä.

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

Vaihe 3: TacoTranslate:n käyttöönotto

Jos haluat integroida TacoTranslaten sovellukseesi, sinun on luotava asiakas käyttämällä aiempia API-avaimia. Luo esimerkiksi tiedosto nimeltä /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;

Määrittelemme TACOTRANSLATE_API_KEY automaattisesti pian.

Asiakkaan luominen erilliseen tiedostoon tekee sen käytöstä myöhemmin helpompaa. Nyt, käyttäen mukautettua /pages/_app.tsx, lisäämme TacoTranslate providerin.

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

Jos sinulla on jo omat pageProps ja _app.tsx, laajenna määritelmä yllä olevien ominaisuuksien ja koodin mukaan.

Vaihe 4: Palvelinpuolen renderöinnin toteuttaminen

TacoTranslate mahdollistaa käännösten palvelinpuolen renderöinnin. Tämä parantaa käyttäjäkokemusta merkittävästi näyttämällä käännetyn sisällön välittömästi, sen sijaan että ensin näkyisi välähdys kääntämättömästä sisällöstä. Lisäksi voimme ohittaa verkkopyynnöt asiakkaalla, koska meillä on jo kaikki tarvitsemamme käännökset.

Aloitamme luomalla tai muokkaamalla /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'),
	});
};

Muokkaa isProduction tarkistusta asetukseesi sopivaksi. Jos true, TacoTranslate tuo esiin julkisen API-avaimen. Jos olemme paikallisessa, testi- tai valmisteluympäristössä (isProduction is false), käytämme salaista read/write API-avainta varmistaaksemme, että uudet merkkijonot lähetetään käännettäväksi.

Tähän mennessä olemme asettaneet Next.js-sovelluksen vain tuettujen kielten luettelolla. Seuraavaksi haemme käännökset kaikille sivuillesi. Tätä varten käytät joko getTacoTranslateStaticProps tai getTacoTranslateServerSideProps tarpeidesi mukaan.

Nämä funktiot ottavat kolme argumenttia: yhden Next.js Static Props Context -olion, TacoTranslate-konfiguraation ja valinnaiset Next.js-ominaisuudet. Huomaa, että revalidate on oletuksena asetettu arvoon 60 kohdassa getTacoTranslateStaticProps, jotta käännöksesi pysyvät ajan tasalla.

Sivulla käytettäessä oletetaan, että sinulla on sivutiedosto kuten /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!"/>;
}

Sinun tulisi nyt pystyä käyttämään Translate komponenttia kääntääksesi merkkijonoja kaikissa React-komponenteissasi.

import {Translate} from 'tacotranslate/react';

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

Vaihe 5: Ota käyttöön ja testaa!

Olemme valmiit! Next.js-sovelluksesi käännetään nyt automaattisesti, kun lisäät merkkijonoja Translate -komponenttiin. Huomaa, että vain ympäristöt, joilla on read/write -oikeudet API-avaimeen, pystyvät luomaan uusia käännettäviä merkkijonoja. Suosittelemme pitämään suljetun ja suojatun staging-ympäristön, jossa voit testata tuotantosovellustasi tällaisella API-avaimella ja lisätä uusia merkkijonoja ennen julkaisua. Tämä estää ketä tahansa varastamasta salaista API-avaintasi ja mahdollisilta ylisuuren käännösprojektin kasvattamiselta lisäämällä uusia, ei-aiheeseen liittyviä merkkijonoja.

Muista katsoa koko esimerkki GitHub-profiilistamme. Sieltä löydät myös esimerkin siitä, kuinka tehdä tämä käyttäen App Routeria! Jos kohtaat ongelmia, ota rohkeasti yhteyttä, niin autamme mielellämme.

TacoTranslate mahdollistaa React-sovellustesi automaattisen käännösten lokalisoinnin nopeasti mihin tahansa kieleen ja sieltä pois. Aloita tänään!