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

Maailman muuttuessa yhä globaalimmaksi, on yhä tärkeämpää, että web-kehittä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, kuinka lisätä kansainvälistäminen React Next.js -sovellukseesi palvelinpuolen renderöinnillä. TL;DR: Katso täydellinen esimerkki tästä.

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

Vaihe 1: Asenna i18n-kirjasto

Kansainvälistämisen (internationalization) toteuttamiseksi Next.js-sovelluksessasi valitsemme ensin i18n-kirjaston. Saatavilla on useita suosittuja kirjastoja, mukaan lukien next-intl. Tässä esimerkissä kuitenkin käytämme TacoTranslate.

TacoTranslate kääntää merkkijonosi automaattisesti mille tahansa kielelle huipputeknologian tekoälyn avulla ja vapauttaa sinut JSON-tiedostojen työläästä hallinnoinnista.

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

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älilehteen. Luo yksi read -avain ja yksi read/write -avain. Tallennamme ne ympäristömuuttujiksi. read -avainta kutsumme public -avaimeksi ja read/write -avainta secret -avaimeksi. Esimerkiksi voit 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 käyttöympä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 en eli englanniksi.
• TACOTRANSLATE_ORIGIN: Se "kansio", johon merkkijonosi tallennetaan, kuten verkkosivustosi URL-osoite. Lue lisää alusta täältä.

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

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

TacoTranslate-integroimiseksi sovellukseesi sinun täytyy luoda client käyttämällä aiemmin saatua 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 pian TACOTRANSLATE_API_KEY-avaimen.

Asiakasohjelman luominen erilliseen tiedostoon helpottaa sen uudelleenkäyttöä myöhemmin. Nyt, käyttäen omaa /pages/_app.tsx -tiedostoa, lisäämme TacoTranslate -toimittajan.

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 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 vastaamaan asetuksiasi. Jos true, TacoTranslate näyttää julkisen API-avaimen. Jos olemme paikallisessa, testaus- tai esiversioympä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-sovelluksen vain tuetuilla kielillä. Seuraavaksi haemme käännökset kaikille sivuillesi. Tätä varten käytät joko getTacoTranslateStaticProps tai getTacoTranslateServerSideProps, riippuen tarpeistasi.

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

Jos haluat 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: 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, joissa API-avaimella on read/write -oikeudet, pystyvät luomaan uusia käännettäviä merkkijonoja. Suosittelemme, että sinulla on suljettu ja suojattu 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 paisuttamasta käännösprojektiasi lisäämällä uusia, ei-liittyviä 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!