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

Maailman globalisoituessa on yhä tärkeämpää, että web-kehittäjät rakentavat sovelluksia, jotka palvelevat käyttäjiä eri maista ja kulttuureista. Yksi keskeisimmistä tavoista saavuttaa tämä on kansainvälistäminen (i18n), joka mahdollistaa sovelluksesi sopeuttamisen eri kielille, valuutoille ja päivämäärämuodoille.

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

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

Vaihe 1: Asenna i18n-kirjasto

Next.js-sovellukseesi kansainvälistämisen toteuttamiseksi 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ämällä huipputason tekoälyä ja vapauttaa sinut JSON-tiedostojen työläästä hallinnasta.

Asennetaan se käyttämällä npm komentorivilläsi:

npm install tacotranslate

Vaihe 2: Luo ilmainen TacoTranslate-tili

Nyt kun sinulla on moduuli asennettuna, 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-avainvälilehdelle. Luo yksi read avain ja yksi read/write avain. Tallennamme ne ympäristömuuttujina. read avainta kutsumme public ja read/write avainta secret -avaimeksi. Voit esimerkiksi lisätä ne .env tiedostoon projektisi juureen.

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 varapaikkakoodin kieli. Tässä esimerkissä asetamme sen arvoon en englannin kielelle.
• TACOTRANSLATE_ORIGIN: ”Kansio”, johon merkkijonosi tallennetaan, kuten verkkosivustosi URL-osoite. Lue lisää alkuperistä täältä.

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

Vaihe 3: TacoTranslate:n määrittäminen

To integrate TacoTranslate with your application, you’ll need to create a client using the API keys from earlier. For example, create a file named /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 pian automaattisesti.

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

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 avulla.

Vaihe 4: Palvelinpuolen renderöinnin toteuttaminen

TacoTranslate mahdollistaa käännösten palvelinpuolen renderöinnin. Tämä parantaa merkittävästi käyttäjäkokemusta näyttämällä käännetyn sisällön välittömästi sen sijaan, että ensin nähtäisiin lyhyt hetki kääntämätöntä sisältöä. Lisäksi voimme ohittaa verkon pyynnöt asiakkaalla, 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 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 määrittäneet Next.js sovellukseen vain luettelon tuetuista kielistä. Seuraavaksi haemme käännökset kaikille sivuillesi. Voit tehdä tämän käyttämällä joko getTacoTranslateStaticProps tai getTacoTranslateServerSideProps tarpeidesi mukaan.

Näillä funktioilla on kolme argumenttia: yksi Next.js Static Props Context objekti, TacoTranslaten määritys ja valinnaiset Next.js ominaisuudet. Huomaa, että revalidate päällä getTacoTranslateStaticProps on oletusarvoisesti 60, jotta käännöksesi pysyvät ajan tasalla.

Jos haluat käyttää kumpaa tahansa funktiota sivulla, oletetaan, että sinulla on sivutustiedosto, 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! 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, että sinulla on suljettu ja suojattu staging-ympäristö, jossa voit testata tuotantosovellustasi tällaisella API-avaimella, lisäten uusia merkkijonoja ennen julkaisua. Tämä estää ketään varastamasta salainen API-avaimesi ja mahdollisesti paisuttamasta käännösprojektiasi lisäämällä uusia, asiaankuulumattomia merkkijonoja.

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

TacoTranslate mahdollistaa React-sovellustesi automaattisen lokalisoimisen nopeasti mihin tahansa kieleen ja sieltä takaisin. Aloita jo tänään!