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

Miten se toimii

Maailman globalisoituessa verkkokehittäjien on yhä tärkeämpää rakentaa 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 kieliin, valuuttoihin ja päivämäärämuotoihin.

Tässä opetusohjelmassa käymme läpi, miten lisäät kansainvälistämisen React Next.js -sovellukseesi palvelinpuolen renderöinnin avulla. TL;DR: Katso koko esimerkki täältä.

Opas on tarkoitettu Next.js-sovelluksille, jotka käyttävät Pages Router.
Jos käytät App Router, katso sen sijaan tätä opasta.

Vaihe 1: Asenna i18n-kirjasto

Lisätäksemme kansainvälistämisen Next.js-sovellukseesi valitsemme ensin i18n-kirjaston. On useita suosittuja kirjastoja, mukaan lukien next-intl. Kuitenkin tässä esimerkissä käytämme TacoTranslate.

TacoTranslate kääntää merkkijonosi automaattisesti mihin tahansa kieleen huipputason 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

Kun olet asentanut moduulin, on aika luoda TacoTranslate-tilisi, käännösprojekti ja siihen liittyvät API-avaimet. Luo tili täällä. 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ömuuttujiksi. read-avain on se, jota kutsumme public-avaimeksi, ja read/write-avain on secret-avaimeksi. Esimerkiksi voit lisätä ne projektisi juureen sijaitsevaan .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 ympäristömuuttujaa: TACOTRANSLATE_DEFAULT_LOCALE ja TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Oletuksena käytettävän varakielen koodi. Tässä esimerkissä asetamme sen arvoksi en (englanti).
• TACOTRANSLATE_ORIGIN: "kansio", johon merkkijonosi tallennetaan, esimerkiksi verkkosivustosi URL-osoite. Lue lisää originista täällä.

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

Vaihe 3: TacoTranslaten käyttöönotto

Integroidaksesi 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 automaattisesti TACOTRANSLATE_API_KEY pian.

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

Vaihe 4: Palvelinpuolen renderoinnin 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äkyisi välähdys kääntämättömästä sisällöstä. Lisäksi voimme jättää asiakaspuolen verkkopyynnöt väliin, 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 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ää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 -objektin, TacoTranslate-konfiguraation ja valinnaiset Next.js-ominaisuudet. Huomaa, että revalidate kohdassa getTacoTranslateStaticProps on oletuksena asetettu arvo 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 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 API-avaimen read/write -oikeudet ovat käytössä, voivat luoda uusia käännettäviä merkkijonoja. Suosittelemme erillistä, suljettua ja suojattua staging-ympäristöä, jossa voit testata tuotantosovellustasi sellaisella API-avaimella ja lisätä uusia merkkijonoja ennen julkaisua. Tämä estää kenenkään varastamasta salaista API-avaintasi ja mahdollisesti paisuttamasta käännösprojektiasi lisäämällä uusia, asiaankuulumattomia 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!