Inicio rápido con Next.js

Descripción general

Esta guía describe cómo internacionalizar un proyecto existente de Next.js que utiliza el App Router.

Para un proyecto que utiliza el Pages Router, sigue la documentación de React.

Cubriremos 3 sencillos pasos:

Configuración

1. Ejecutando el asistente de configuración

El asistente de configuración te guiará a través del proceso de internacionalización de tu proyecto.

npx gtx-cli@latest init

Para configurar tu proyecto manualmente, sigue la guía de configuración manual.

El asistente de configuración:

1. Instalará las bibliotecas necesarias.
2. Configurará los idiomas compatibles con tu proyecto.
3. Envolverá los componentes JSX de tu proyecto con el componente <T>.
4. Añadirá withGTConfig() a tu archivo next.config.js.
5. Generará una clave API de producción y un ID de proyecto para tu proyecto.

Consulta la documentación del asistente de configuración para más información.

2. Añadiendo variables de entorno

El asistente de configuración creará un archivo .env.local para ti en la raíz de tu proyecto que contiene tu clave API de producción y el ID del proyecto.

Sin embargo, para usar gt-next en modo de desarrollo, necesitarás añadir una clave API de desarrollo en lugar de una de producción.

GT_API_KEY="YOUR_GT_API_KEY"
GT_PROJECT_ID="YOUR_GT_PROJECT_ID"

3. Limpiando cadenas de texto

El asistente de configuración envolverá todos los componentes JSX de tu proyecto con el componente <T>. Sin embargo, es posible que notes que las cadenas de texto no se ven afectadas.

Por ejemplo, si tienes una constante de cadena como esta:

export default function Example() {
  const greeting = "Hello, world!";
  return <p>{greeting}</p>;
}

El asistente de configuración no tocará esta cadena.

Para solucionar esto, puedes usar el hook useGT() y la función getGT() para traducir la cadena.

import { useGT } from "gt-next/client";
export default function Example() {
  const t = useGT();
  return <p>{t("Hello, world!")}</p>;
}

¡Probémoslo!

¡Felicidades! 🥳 ¡Tu aplicación ahora es multilingüe! Veámosla en acción.

Mira tu aplicación en otro idioma

npm run dev 

Solución de problemas

Envío a Producción

Sigue nuestra guía sobre envío a producción.

Próximos pasos

• Consulta nuestra referencia de API de Next.js para obtener información detallada sobre el componente <T> y otros componentes disponibles.
• Mejora tu contenido con los componentes <Num>, <Currency>, <Branch> y <Plural>.
• Aprende cómo mejorar el SEO con enrutamiento i18n (añadiendo rutas para cada idioma, p. ej. example.com/en, example.com/fr) y generación de sitios estáticos.
• Adapta tu aplicación para soportar idiomas de derecha a izquierda como el árabe y el hebreo.

Configuración Manual

Si prefieres hacer la configuración manualmente, sigue los pasos a continuación.

1. Instalar bibliotecas

Instala las bibliotecas gt-next y gtx-cli.

npm i gt-next
npm i gtx-cli --save-dev

2. Añadir el plugin withGTConfig()

Añade withGTConfig() a tu archivo next.config.js. Puedes especificar los idiomas que quieres soportar pasando un array de códigos de idioma.

import { withGTConfig } from 'gt-next/config';
 
const nextConfig = {};
 
export default withGTConfig(nextConfig, {
  locales: ['pt', 'es'], // Soporte para portugués y español
});

3. Añadir el componente <T>

Envuelve cualquier contenido JSX anidado en el componente <T> para hacerlo traducible. Para más información, consulta la guía sobre el uso de componentes <T>.

import { T } from "gt-next";
 
export default function Example() {
  return (
    <T>
      <p>
        Esto se traduce.
      </p>
    </T>  
  );
}

Usa el componente <Var> para designar contenido JSX que no debe ser traducido.

import { T, Var } from "gt-next";
 
export default function Example() {
  return (
    <T>
      <p>
        Esto se traduce. <Var>Esto no.</Var>
      </p>
    </T>  
  );
}

Para cadenas de texto, puedes usar useGT() o getGT() para la traducción.

import { useGT } from "gt-next/client";
import { getGT } from "gt-next/server";
 
export default function Example() {
  const t = useGT(); // lado del cliente
  const t = await getGT(); // lado del servidor
  return (
    <p>
      {t("Esto se traduce.")}
    </p>
  );
}

4. Añadir tus variables de entorno

Añade tu clave API y ID de Proyecto a tu entorno local.

GT_API_KEY="TU_GT_API_KEY"
GT_PROJECT_ID="TU_GT_PROJECT_ID"