Com implementar la internacionalització en una aplicació Next.js que utilitza el Pages Router
Fes que la teva aplicació React sigui més accessible i arriba a nous mercats amb la internacionalització (i18n).
A mesura que el món es globalitza, és cada cop més important que els desenvolupadors web creïn aplicacions que puguin atendre usuaris de diferents països i cultures. Una de les maneres clau d’aconseguir-ho és mitjançant la internacionalització (i18n), que permet adaptar la teva aplicació a diferents idiomes, divises i formats de data.
En aquest tutorial, explorarem com afegir la internacionalització a la teva aplicació React Next.js, amb renderització al costat servidor. TL;DR: Vegeu l’exemple complet aquí.
Aquesta guia és per a aplicacions Next.js que utilitzen el Pages Router.
Si utilitzeu el App Router, si us plau, consulteu aquesta guia en canvi.
Pas 1: Instal·la una biblioteca i18n
Per implementar la internacionalització a la teva aplicació Next.js, primer triarem una biblioteca d’i18n. Hi ha diverses biblioteques populars, inclosa next-intl. No obstant això, en aquest exemple, farem servir TacoTranslate.
TacoTranslate tradueix automàticament les teves cadenes a qualsevol idioma mitjançant IA d’última generació i t’allibera de la gestió tediosa dels fitxers JSON.
Anem a instal·lar-lo amb npm a la teva terminal:
npm install tacotranslate
Pas 2: Crea un compte gratuït a TacoTranslate
Ara que ja tens el mòdul instal·lat, és hora de crear el teu compte de TacoTranslate, un projecte de traducció i les claus API associades. Crea un compte aquí. És gratuït i no requereix que afegeixis una targeta de crèdit.
Dins de la interfície d'usuari de l'aplicació TacoTranslate, crea un projecte i navega fins a la pestanya de claus API. Crea una clau read
i una clau read/write
. Les desarem com a variables d’entorn. La clau read
és la que anomenem public
i la clau read/write
és secret
. Per exemple, podries afegir-les a un fitxer .env
a la carpeta arrel del teu projecte.
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
Assegureu-vos de no filtrar mai la clau API secreta read/write
en entorns de producció del costat client.
També afegirem dues variables d’entorn més: TACOTRANSLATE_DEFAULT_LOCALE
i TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: El codi de localització predeterminat per defecte. En aquest exemple, el configurarem com aen
per a anglès.TACOTRANSLATE_ORIGIN
: La “carpeta” on es desaran les teves cadenes, com ara l’URL del teu lloc web. Llegeix més sobre els origens aquí.
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
Pas 3: Configurant TacoTranslate
Per integrar TacoTranslate amb la teva aplicació, hauràs de crear un client utilitzant les claus API esmentades anteriorment. Per exemple, crea un fitxer anomenat /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;
Definirem automàticament TACOTRANSLATE_API_KEY
en breu.
Crear el client en un fitxer separat fa que sigui més fàcil reutilitzar-lo més endavant. Ara, utilitzant un /pages/_app.tsx
personalitzat, afegirem el proveïdor TacoTranslate
.
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>
);
}
Si ja tens pageProps
i _app.tsx
personalitzats, si us plau amplia la definició amb les propietats i el codi de més amunt.
Pas 4: Implementació del renderitzat del costat servidor
TacoTranslate permet el renderitzat del servidor de les teves traduccions. Això millora molt l’experiència de l’usuari mostrant el contingut traduït immediatament, en lloc d’un flaix de contingut no traduït primer. A més, podem evitar les peticions de xarxa al client, perquè ja tenim totes les traduccions que necessitem.
Començarem creant o modificant /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'),
});
};
Modifica la comprovació isProduction
per adaptar-la a la teva configuració. Si true
, TacoTranslate mostrarà la clau pública de l'API. Si estem en un entorn local, de prova o staging (isProduction
is false
), farem servir la clau secreta read/write
de l'API per assegurar que les noves cadenes s'enviïn per traducció.
Fins ara, només hem configurat l'aplicació Next.js amb una llista d'idiomes compatibles. El següent que farem és obtenir les traduccions per a totes les teves pàgines. Per fer-ho, utilitzaràs o bé getTacoTranslateStaticProps
o getTacoTranslateServerSideProps
segons les teves necessitats.
Aquestes funcions prenen tres arguments: un objecte Next.js Static Props Context, la configuració per a TacoTranslate, i propietats opcionals de Next.js. Tingueu en compte que revalidate
en getTacoTranslateStaticProps
està configurat per defecte a 60, perquè les vostres traduccions estiguin sempre actualitzades.
Per utilitzar qualsevol de les dues funcions en una pàgina, suposem que teniu un fitxer de pàgina com /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!"/>;
}
Ara ja hauríeu de poder utilitzar el component Translate
per traduir cadenes dins de tots els vostres components React.
import {Translate} from 'tacotranslate/react';
function Component() {
return <Translate string="Hello, world!"/>
}
Pas 5: Desplega i prova!
Hem acabat! La vostra aplicació React ara es traduirà automàticament quan afegiu qualsevol cadena a un component Translate
. Tingueu en compte que només els entorns amb permisos read/write
per a la clau API podran crear noves cadenes per traduir. Recomanem tenir un entorn de staging tancat i segur on pugueu provar la vostra aplicació de producció amb una clau API d’aquest tipus, afegint noves cadenes abans de posar-la en funcionament. Això evitarà que ningú pugui robar la vostra clau API secreta i que, potencialment, es sobrecarregui el vostre projecte de traducció amb cadenes noves i no relacionades.
Assegureu-vos de consultar l'exemple complet al nostre perfil de GitHub. Allà també trobareu un exemple de com fer-ho utilitzant el App Router! Si teniu qualsevol problema, no dubteu a contactar-nos, i estarem encantats d'ajudar-vos.
TacoTranslate us permet localitzar automàticament les vostres aplicacions React ràpidament cap a i des de més de 75 idiomes. Comenceu avui mateix!