​
Requisitos previos

Quetzal puede usarse para traducir Next.js que utiliza el marco next-intl.

​
Instalando Quetzal

Instalar
npm install --save @quetzallabs/i18n-next @quetzallabs/i18n-core

​
Configuración

Después de instalar el paquete, se requiere configuración adicional.

1

Ejecutar script de configuración

Ejecute npx quetzal-setup en el directorio donde instaló el paquete Quetzal

2

Establecer Clave de API

Configure la variable de entorno QUETZAL_API_KEY con su Clave de API de Quetzal. Puede encontrar su Clave de API en su panel de control del proyecto

3

Actualizar quetzal.config.json

El script de configuración debería haber creado esto para ti. Actualiza paths para que apunte a los directorios con el código que planeas localizar. Actualiza parser a i18next-parser

Ejemplo quetzal.config.json
{
  "paths": ["src/**/*.{js,tsx}"],
  "parser": "i18next-parser"
}
4

Configurar proveedor next-intl

Quetzal utiliza el paquete next-intl para inyectar traducciones en tu aplicación, por lo que tu aplicación necesita usar el NextIntlClientProvider

Esto se verá algo así:


import { NextIntlClientProvider } from "next-intl";
import { getMessages } from "next-intl/server";

const messages = await getMessages();

...

return (

<html>
    <body>
        <NextIntlClientProvider messages={messages}>
            {children}
        </NextIntlClientProvider>
    </body>
</html>

);

Más detalles sobre este proveedor se pueden encontrar en la documentación de next-intl.

5

Configurar el complemento next-intl

Tu aplicación también necesita agregar el NextIntlPlugin de next-intl a tu archivo next.config.

import createNextIntlPlugin from 'next-intl/plugin';

const withNextIntl = createNextIntlPlugin();

/** @type {import('next').NextConfig} */
const nextConfig = {};

export default withNextIntl(nextConfig);

Más detalles sobre este plugin se encuentran en la documentación de next-intl.

​
¡Y listo!

La configuración debería estar completa, y puedes empezar a traducir tu aplicación.

​
Verificar su Instalación

Ejecuta npx quetzal-process-translations para probar tu instalación.

Si tu resultado se parece al de arriba, entonces Quetzal se ha instalado correctamente y tu aplicación comenzará a admitir otros idiomas.

Si hay errores, esperamos que sean claros y puedan solucionarse. De lo contrario, contáctenos y podremos hacer que su instalación funcione.

Nota: Este script fallará si no ha marcado ningún texto en su aplicación para traducción. Por lo tanto, es posible que tenga que comenzar a traducir su aplicación primero

Quetzal está diseñado para integrarse sin problemas en su proceso de compilación. Por lo tanto, este script debe ejecutarse como mínimo cada vez que se realiza una compilación, pero podría ejecutarse con la frecuencia que desee.

El script de configuración debería haber agregado npx quetzal-process-translations al script pre-build en el package.json de su proyecto, pero esto puede ser modificado.

Panel de Control del ProyectoReact