Inicio rápido de Next.js

Resumen

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 4 pasos simples:

Todo este proceso debería tomar menos de 5 minutos.

Configuració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 deseas soportar pasando un arreglo de códigos de locales.

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>  
  );
}

npx gtx-cli setup

Para cadenas de texto, puedes usar useGT() o getGT() para la traducción. Para más información, consulta esta guía.

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 el ID del proyecto a tu entorno local.

GT_API_KEY="YOUR_GT_API_KEY"
GT_PROJECT_ID="YOUR_GT_PROJECT_ID"

¡Vamos a probarlo!

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

Ver 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 (agregando rutas para cada localización, por ejemplo, example.com/en, example.com/fr)
• Refleja tu aplicación para soportar idiomas de derecha a izquierda como árabe y hebreo.
• Crea una lista de idiomas aprobados para tu aplicación con el plugin de Next.js.