Kuinka toteuttaa kansainvälistäminen Next.js-sovelluksessa, joka käyttää Pages Routeria
Tee React-sovelluksestasi saavutettavampi ja tavoita uusia markkinoita kansainvälistämisellä (i18n).
Maailman globalisoituessa verkkokehittäjien on yhä tärkeämpää rakentaa sovelluksia, jotka palvelevat eri maiden ja kulttuurien käyttäjiä. 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ä tutoriaalissa tutkimme, kuinka lisätä kansainvälistäminen React Next.js -sovellukseesi, hyödyntäen palvelinpuolen renderöintiä. TL;DR: Katso koko 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 (i18n) toteuttamiseksi Next.js-sovelluksessasi valitsemme ensin i18n-kirjaston. Saatavilla on useita suosittuja kirjastoja, mukaan lukien next-intl. Tässä esimerkissä käytämme kuitenkin TacoTranslate.
TacoTranslate kääntää merkkijonosi automaattisesti mihin tahansa kieleen huipputeknologiaa hyödyntävän tekoälyn avulla 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 olet asentanut moduulin, on aika luoda TacoTranslate-tili, 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älilehdelle. Luo yksi read
avain ja yksi read/write
avain. Tallennamme ne ympäristömuuttujiksi. 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 client-puolen tuotantoympäristöihin.
Lisäämme myös kaksi muuta ympäristömuuttujaa: TACOTRANSLATE_DEFAULT_LOCALE
ja TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: Oletusarvoinen varakielikoodi. Tässä esimerkissä asetamme sen arvoonen
englannille.TACOTRANSLATE_ORIGIN
: ”Kansio”, johon merkkijonosi tallennetaan, kuten verkkosivustosi URL-osoite. Lue lisää alkulähteistä tästä.
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
Vaihe 3: TacoTranslate:n määrittäminen
Integroiaksesi TacoTranslate-sovelluksesi kanssa, sinun täytyy luoda asiakas hyödyntä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
-avaimen.
Asiakkaan luominen erilliseen tiedostoon tekee sen uudelleenkäytöstä myöhemmin helpompaa. Nyt käytämme mukautettua /pages/_app.tsx
-tiedostoa ja 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
, ole hyvä ja laajenna määritelmä yllä olevien ominaisuuksien ja koodin avulla.
Vaihe 4: Palvelinpuolen renderöinnin toteuttaminen
TacoTranslate mahdollistaa käännösten renderöinnin palvelinpuolella. Tämä parantaa merkittävästi käyttäjäkokemusta näyttämällä käännetyn sisällön välittömästi, eikä ensin näkymässä ole hetken verran kääntämätöntä sisältöä. Lisäksi voimme ohittaa verkonpyynnöt asiakkaalla, koska meillä on jo kaikki tarvittavat käännökset.
Aloitamme luomalla tai muokkaamalla tiedostoa /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
-tarkistus vastaamaan omaa asetustasi. Jos arvo on true
, TacoTranslate käyttää julkista API-avainta. Jos olemme paikallisessa, testaus- tai esituotantoympä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-sovellukselle vain tuettujen kielten listan. 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 valinnaisia Next.js-ominaisuuksia. Huomaa, että revalidate
kohdalla getTacoTranslateStaticProps
on oletusarvoisesti asetettu arvoon 60, jotta käännöksesi pysyvät ajan tasalla.
Jos haluat käyttää 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 on read/write
-oikeudet API-avaimeen, 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 lisäten uusia merkkijonoja ennen julkaisua. Tämä estää ketään varastamasta salaisia API-avaintasi ja mahdollisesti paisuttamasta käännösprojektiasi lisäämällä uusia, asiaankuulumattomia merkkijonoja.
Muista katsoa täydellinen esimerkki GitHub-profiilistamme. Sieltä löydät myös esimerkin siitä, miten tämä tehdään käyttämällä App Router-reititintä! Jos kohtaat ongelmia, ota rohkeasti yhteyttä, niin autamme mielellämme.
TacoTranslate mahdollistaa React-sovellustesi automaattisen lokalisoimisen nopeasti yli 75 kielelle ja niiltä takaisin. Aloita tänään!