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

Miten se toimii

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ä opetusohjelmassa tutkimme, miten voit lisätä kansainvälistämisen 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ä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 huippuluokan tekoälyä hyödyntäen, 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 moduuli on asennettu, on aika luoda TacoTranslate-tili, käännösprojekti ja siihen 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ömuuttujiin. read -avain on se, mitä kutsumme public -avaimeksi ja read/write -avain on secret. Voit esimerkiksi lisätä ne .env -tiedostoon projektisi juurikansiossa.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010

Varmista, että et 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 arvoksi en eli englanti.
• TACOTRANSLATE_ORIGIN: ”Kansio”, johon merkkijonosi tallennetaan, kuten verkkosivustosi URL-osoite. Lue lisää originaaleista täältä.

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

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

TacoTranslate-integraation tekemiseksi sovellukseesi sinun täytyy luoda klientti käyttäen aiemmin saatuja 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 pian automaattisesti TACOTRANSLATE_API_KEY-arvon.

Asiakirjan luominen erilliseen tiedostoon helpottaa sen uudelleenkäyttöä myöhemmin. Nyt lisäämme räätälöidyn /pages/_app.tsx avulla TacoTranslate -palveluntarjoajan.

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 toteutus

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 heti, 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 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 asti olemme määrittäneet Next.js-sovellukselle vain tuettujen kielten luettelon. Seuraavaksi haemme käännökset kaikille sivuillesi. Tätä varten käytät joko getTacoTranslateStaticProps tai getTacoTranslateServerSideProps vaatimustesi mukaan.

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

Jotta voit käyttää kumpaa tahansa 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! 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 suljettua ja suojattua staging-ympäristöä, jossa voit testata tuotantosovellustasi tällaisella API-avaimella ja lisätä uusia merkkijonoja ennen julkaisua. Tämä estää ketään varastamasta salaista API-avaintasi ja mahdollisesti väärinkäyttämästä käännösprojektiasi lisäämällä uusia, epäolennaisia merkkijonoja.

Be sure to check out the complete example over at our GitHub profile. There, you’ll also find an example of how to do this using the App Router! If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Get started today!