Kuinka toteuttaa kansainvälistäminen Next.js-sovelluksessa, joka käyttää Pages Router-reititintä
Tee React-sovelluksestasi saavutettavampi ja tavoita uusia markkinoita kansainvälistämisen (i18n) avulla.
Maailman globalisoituessa on yhä tärkeämpää, että web-kehittäjät rakentavat sovelluksia, jotka palvelevat käyttäjiä eri maista ja kulttuureista. Yksi keskeinen tapa saavuttaa tämä on kansainvälistäminen (i18n), joka mahdollistaa sovelluksesi mukauttamisen 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 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
Next.js-sovellukseesi kansainvälistämisen toteuttamiseksi 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 edistyksellisen 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
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ömuuttujiin. read
avainta kutsumme public
ja read/write
avain on secret
. 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 tuotantoympäristöjen asiakaspuolelle.
Lisäämme myös kaksi ympäristömuuttujaa: TACOTRANSLATE_DEFAULT_LOCALE
ja TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: Oletusarvoinen varakielikoodi. Tässä esimerkissä asetamme sen arvoksien
eli englanti.TACOTRANSLATE_ORIGIN
: ”Kansio”, johon merkkijonosi tallennetaan, esimerkiksi verkkosivustosi URL-osoite. Lue lisää alkuperistä tästä.
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
Vaihe 3: TacoTranslate:n asetukset
Jotta voit integroida TacoTranslate-sovelluksesi kanssa, sinun tulee luoda client 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 TACOTRANSLATE_API_KEY
automaattisesti pian.
Asiakasohjelman luominen erilliseen tiedostoon tekee siitä helpommin uudelleenkäytettävän myöhemmin. Nyt lisäämme mukautetun /pages/_app.tsx
avulla 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ä olevilla ominaisuuksilla ja koodilla.
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ä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 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 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 listan. 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.
Jotta voit käyttää kumpaakin funktiota sivulla, oletetaan, että sinulla on sivutiedosto nimeltä /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! React-sovelluksesi käännetään nyt automaattisesti, kun lisäät mitä tahansa 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ä tahansa varastamasta salaisen API-avaimesi ja mahdollisesti laajentamasta 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!