Kuinka toteuttaa kansainvälistäminen Next.js-sovelluksessa, joka käyttää Pages Router

Maailman globalisoituessa verkko­kehittäjien on yhä tärkeämpää rakentaa sovelluksia, jotka palvelevat eri maiden ja kulttuurien käyttäjiä. Yksi keskeisistä tavoista saavuttaa tämä on kansainvälistäminen (i18n), jonka avulla voit mukauttaa sovelluksesi eri kielille, valuutoille ja päivämäärämuodoille.

Tässä opastuksessa tutkimme, kuinka lisätä kansainvälistäminen React Next.js -sovellukseesi palvelinpuolen renderöinnin kera. TL;DR: Katso koko esimerkki tästä.

Tämä opas koskee Next.js-sovelluksia, jotka käyttävät Pages Router.
Jos käytät App Router, katso sen sijaan tämä opas.

Vaihe 1: Asenna i18n-kirjasto

Jotta voit toteuttaa kansainvälistämisen Next.js-sovelluksessasi, valitsemme ensin i18n-kirjaston. Saatavilla on useita suosittuja kirjastoja, mukaan lukien next-intl. Tässä esimerkissä käytämme kuitenkin TacoTranslate.

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

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

npm install tacotranslate

Vaihe 2: Luo ilmainen TacoTranslate-tili

Nyt kun olet asentanut moduulin, on aika luoda TacoTranslate-tilisi, käännösprojekti ja siihen liittyvät API-avaimet. Luo tili tästä. Se on ilmainen, 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ömuuttujiin. read-avain on se, mitä kutsumme public-avaimeksi, ja read/write-avain on secret. Esimerkiksi voit lisätä ne projektisi juureen .env-tiedostoon.

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 muuta ympäristömuuttujaa: TACOTRANSLATE_DEFAULT_LOCALE ja TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Oletusarvoinen varalokaalikoodi. Tässä esimerkissä asetamme sen en englannille.
• TACOTRANSLATE_ORIGIN: “kansio”, johon merkkijonosi tallennetaan, esimerkiksi verkkosivustosi URL-osoite. Lue lisää originsista täältä.

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

Vaihe 3: TacoTranslate-asetusten määrittäminen

Jotta voit integroida TacoTranslaten sovellukseesi, sinun täytyy luoda asiakas käyttäen aiemmin mainittuja API-avaimia. Esimerkiksi luo 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 automaattisesti TACOTRANSLATE_API_KEY pian.

Clientin luominen erilliseen tiedostoon tekee sen myöhemmin uudelleenkäytöstä helpompaa. Nyt käytämme mukautettua /pages/_app.tsx, ja 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 mukautetut pageProps ja _app.tsx, laajenna määrittelyä yllä olevilla ominaisuuksilla ja koodilla.

Vaihe 4: Palvelinpuolen renderöinnin toteuttaminen

TacoTranslate mahdollistaa käännösten palvelinpuolen renderöinnin. Tämä parantaa käyttäjäkokemusta huomattavasti näyttämällä käännetyn sisällön välittömästi sen sijaan, että käyttäjä ensin näkisi vilahduksen kääntämättömästä sisällöstä. Lisäksi voimme ohittaa asiakaspuolen verkkopyynnöt, 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 vastaamaan asetuksiasi. Jos true, TacoTranslate käyttää julkista API-avainta. Jos olemme paikallisessa, testaus- tai esituotantoympäristössä (isProduction is false), käytämme salaista read/write API-avainta varmistaaksemme, että uudet merkkijonot lähetetään käännettäviksi.

Tähän asti olemme määrittäneet 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ä getTacoTranslateStaticProps -funktion revalidate on oletuksena asetettu arvoon 60, jotta käännöksesi pysyvät ajan tasalla.

Jos haluat käyttää jompaakumpaa funktiota sivulla, 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 pitäisi 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: Julkaise ja testaa!

Olemme valmiit! React-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, voivat luoda uusia käännettäviä merkkijonoja. Suosittelemme pitämään suljetun ja suojatun staging-ympäristön, jossa voit testata tuotantosovellustasi tällaisen API-avaimen avulla ja lisätä uusia merkkijonoja ennen julkaisua. Tämä estää ketään ketään varastamasta salaista API-avaintasi ja mahdollisesti paisuttamasta käännösprojektiasi lisäämällä uusia, ei-asiaankuuluvia merkkijonoja.

Muista tutustua täydelliseen esimerkkiin GitHub-profiilistamme. Sieltä löydät myös esimerkin siitä, miten tämä tehdään käyttämällä App Router! Jos kohtaat ongelmia, ota rohkeasti yhteyttä, niin autamme mielellämme.

TacoTranslate mahdollistaa React-sovellustesi automaattisen lokalisoimisen nopeasti yli 75 kielelle ja takaisin. Aloita jo tänään!