Kuinka ottaa kansainvälistäminen (i18n) käyttöön Next.js-sovelluksessa, joka käyttää Pages Router

Maailman globalisoituessa on yhä tärkeämpää, että verkkokehittäjät rakentavat sovelluksia, jotka palvelevat käyttäjiä eri maista ja kulttuureista. 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ä opetusohjeessa perehdymme siihen, miten lisätä kansainvälistäminen React Next.js -sovellukseen palvelinpuolen renderöinnin avulla. TL;DR: Katso koko esimerkki täältä.

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

Kansainvälistämisen (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 käyttäen huipputason tekoälyä 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-tili, käännösprojekti ja siihen liittyvät API-avaimet. Luo tili täältä. Se on ilmaista, eikä edellytä 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 sijoitettuun .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 varakielen koodi. Tässä esimerkissä asetamme sen arvoon en (englanti).
• TACOTRANSLATE_ORIGIN: "Kansio", johon merkkijonosi tallennetaan, esimerkiksi verkkosivustosi URL-osoite. Lue lisää origin‑käsitteestä täältä.

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

Vaihe 3: TacoTranslate-palvelun käyttöönotto

Jotta voit integroida TacoTranslaten sovellukseesi, sinun täytyy luoda asiakas käyttämällä aiemmin annettuja 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 TACOTRANSLATE_API_KEY automaattisesti pian.

Clientin luominen erilliseen tiedostoon tekee sen myöhemmän käytön helpommaksi. Käyttämällä 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 mukautetut pageProps ja _app.tsx, laajenna määritelmää 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 merkittävästi näyttämällä käännetyn sisällön välittömästi sen sijaan, että ensin näkyisi hetkellinen välähdys kääntämätöntä sisältöä. Lisäksi voimme ohittaa asiakaspuolen verkkopyynnöt, koska meillä on jo kaikki tarvittavat 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 näyttää julkisen API-avaimen. Jos olemme paikallisessa, testaus- tai staging-ympäristössä (isProduction is false), käytämme salaista read/write API-avainta varmistaaksemme, että uudet merkkijonot lähetetään käännöstä varten.

Tähän asti olemme ainoastaan määrittäneet Next.js-sovellukselle tuettujen kielten luettelon. 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 -objektin, TacoTranslate-konfiguraation ja valinnaiset Next.js‑ominaisuudet. Huomaa, että revalidate kohdassa getTacoTranslateStaticProps on oletuksena asetettu arvoon 60, jotta käännöksesi pysyvät ajan tasalla.

Käyttääksesi 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 merkkijonojen kääntämiseen 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! React-sovelluksesi käännetään nyt automaattisesti, kun lisäät merkkijonoja Translate komponenttiin. Huomaa, että vain ympäristöt, joilla API-avaimella on read/write oikeudet, pystyvät luomaan uusia käännettäviä merkkijonoja. Suosittelemme suljettua ja suojattua staging-ympäristöä, jossa voit testata tuotantosovellustasi tällaisella API-avaimella ja lisätä uusia merkkijonoja ennen julkaisua. Tämän ansiosta kukaan ei voi varastaa salaista API-avaintasi eikä käännösprojektisi paisu lisäämällä uusia, asiaankuulumattomia merkkijonoja.

Muista tutustua täydelliseen esimerkkiin GitHub-profiilissamme. Siellä löydät myös esimerkin siitä, miten tämä tehdään käyttäen App Routeria! Jos kohtaat ongelmia, ota rohkeasti yhteyttä meihin, niin autamme mielellämme.

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