Kuinka toteuttaa kansainvälistäminen Next.js-sovelluksessa, joka käyttää Pages Router
Tee React-sovelluksestasi entistä saavutettavampi ja tavoita uusia markkinoita kansainvälistämisellä (i18n).
Maailman globalisoituessa on web-kehittäjille yhä tärkeämpää rakentaa sovelluksia, jotka palvelevat eri maiden ja kulttuurien käyttäjiä. Yksi keskeinen tapa 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 näytämme, miten lisäät kansainvälistämisen React Next.js -sovellukseesi palvelinpuolen renderöinnin avulla. TL;DR: Katso koko esimerkki täältä.
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
Jotta voisimme toteuttaa kansainvälistämisen Next.js-sovellukseesi, valitsemme ensin i18n-kirjaston. On olemassa useita suosittuja kirjastoja, kuten next-intl. Kuitenkin tässä esimerkissä käytämme TacoTranslate.
TacoTranslate kääntää merkkijonosi automaattisesti mihin tahansa kieleen huippuluokan 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 moduuli on asennettu, on aika luoda TacoTranslate-tilisi, käännösprojekti ja siihen liittyvät API-avaimet. Luo tili tästä. Se on ilmainen, eikä edellytä 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
-avaimeksi ja read/write
-avainta kutsumme secret
-avaimeksi. Esimerkiksi voit lisätä ne projektisi juureen olevaan .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
: Oletusarvoinen fallback-lokaalikoodi. Tässä esimerkissä asetamme sen arvoonen
(englanti).TACOTRANSLATE_ORIGIN
: Se "kansio", johon merkkijonosi tallennetaan, esimerkiksi verkkosivustosi URL-osoite. Lue lisää originista täältä.
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
Vaihe 3: TacoTranslate:n käyttöönotto
Jotta voit integroida TacoTranslaten sovellukseesi, sinun täytyy luoda client käyttämällä edellä mainittuja 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 TACOTRANSLATE_API_KEY
pian automaattisesti.
Klientin luominen erilliseen tiedostoon tekee sen uudelleenkäytöstä myöhemmin helpompaa. 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 renderöinnin toteuttaminen
TacoTranslate mahdollistaa käännösten palvelinpuolisen renderöinnin. Tämä parantaa käyttäjäkokemusta merkittävästi, sillä käännetty sisältö näytetää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 asiakkaan verkkopyynnöt, 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äännöstä varten.
Tähän asti olemme asettaneet Next.js-sovellukselle vain luettelon tuetuista kielistä. 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ä getTacoTranslateStaticProps
-funktion revalidate
on oletusarvoisesti 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!"/>;
}
Voit nyt käyttää 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 valmiita! React-sovelluksesi käännetään nyt automaattisesti, kun lisäät merkkijonoja Translate
-komponenttiin. Huomaa, että vain ympäristöt, joilla API-avaimeen on myönnetty read/write
-oikeudet, pystyvät luomaan uusia käännettäviä merkkijonoja. Suosittelemme pitämään suljetun ja suojatun staging-ympäristön, jossa voit testata tuotantosovellustasi kyseisellä 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, asiaankuulumattomia merkkijonoja.
Muista tutustua täydelliseen esimerkkiin GitHub-profiilissamme. Siellä löydät myös esimerkin siitä, miten tämä tehdään käyttäen App Router! Jos kohtaat ongelmia, ota rohkeasti yhteyttä, autamme mielellämme.
TacoTranslate mahdollistaa React‑sovellustesi automaattisen lokalisoimisen nopeasti yli 75 kielelle ja takaisin. Aloita jo tänään!