Primeros pasos

Haz clic en tu framework de React para empezar:

npx gtx-cli@latest

¿Qué es General Translation?

General Translation es una pila completa de internacionalización (i18n) que te permite lanzar apps multilingües de forma rápida y sencilla.

General Translation incluye lo siguiente:

• Bibliotecas de desarrollo de código abierto para React y Next.js
• Un servicio de traducción con IA
• Un paquete de infraestructura completo para entregar contenido de traducción

Si deseas usar las bibliotecas de GT con tu propio proveedor de traducción, consulta nuestra documentación independiente para gt-next y gt-react.

Si deseas usar tu propia biblioteca de i18n, pero aun así quieres usar el servicio de traducción con IA de General Translation, consulta la documentación de nuestra herramienta CLI.

Si deseas usar General Translation para traducir tus archivos JSON, Markdown o MDX, consulta la documentación de nuestra herramienta CLI.

npx gtx-cli@latest

¡Ejecuta nuestro asistente de configuración para empezar!

Funcionalidades

⚛️ Traduce componentes completos de React en línea

• Basta con un único componente <T> de apertura y cierre para traducir un componente completo de React.
  • Sin necesidad de refactorizaciones complejas ni llamadas de función engorrosas.
• El contenido permanece en línea y en la misma ubicación que tu código.
  • ¡No hacen falta keys, strings ni files adicionales!
• La biblioteca gestiona toda la lógica de i18n entre bambalinas, para que tú no tengas que hacerlo.
• Las traducciones siempre se mantienen sincronizadas con tu código fuente.
• Las traducciones incluyen información contextual sobre el contenido, por lo que son más precisas.

export default function Page() {
  return (
    <T>
      <p>Puedes escribir cualquier JSX como children del componente {'<T>'}.</p>
      <p>
        Por ejemplo, podrías escribir un <a href='/'>enlace</a> y que el texto se traduzca en contexto.
      </p>
      <div>
        <div>
          <p>Incluso los componentes muy anidados se traducen en contexto.</p>
          <button>Haz clic</button>
        </div>
      </div>
    </T> 
  );
}

🔎 Paridad de funciones con bibliotecas existentes

• Las bibliotecas de GT también son compatibles con las mismas funciones que bibliotecas existentes como i18next, react-intl y next-intl.
• Se admiten funciones como diccionarios, plurales, monedas y enrutamiento automático.

🧠 Servicio de traducción con IA gratuito

• Nuestro servicio de traducción con IA gratuito te permite crear traducciones para tu app en segundos.
• Recarga automática de traducciones actualizará tus traducciones a medida que las escribes.
• El contenido HTML se reordena y se adapta según el idioma.

🔧 Para desarrolladores

• La configuración es sencilla y puede completarse en minutos.
• Todas las bibliotecas de GT son de código abierto y funcionan de forma independiente.
  • Puedes usar tu propio proveedor de traducción o nuestro servicio gratuito de traducción con IA.
• No pierdas más tiempo gestionando claves de traducción como t('menu.header.title').
  • ¡Escribe todo en línea!

Consulta nuestro repositorio de GitHub para ver el código fuente y algunos proyectos de ejemplo.

¿Por qué elegir General Translation?

General Translation es una stack de i18n completa, que incluye bibliotecas para desarrolladores, traducciones con IA y un paquete de infraestructura integral para aplicaciones multilingües.

Puedes combinar nuestras bibliotecas con tu propio proveedor de traducción o usar nuestro servicio gratuito de traducción con IA con tu propia biblioteca de i18n.

Para una experiencia de i18n fluida, de extremo a extremo, recomendamos usar nuestras bibliotecas junto con nuestro servicio de traducción.

Con bibliotecas de GT como gt-react y gt-next, puedes:

1. Traduce componentes completos de React, no solo cadenas

La UI pasada como children del componente <T> se traducirá sin importar lo complejo que sea el árbol de JSX. Por ejemplo:

import { T } from 'gt-next';

export default function Page() {
  return (
    <T>
      <p>
        Todos los children del <b>componente {`<T>`}</b> se traducirán.
      </p>
      <p>
        Elementos como <a href='/'>enlaces</a>
        {', '}
        <button>botones</button>
        {', '}
        e incluso{' '}
        <div>
          {' '}
          <div>
            {' '}
            <div> componentes profundamente anidados </div>{' '}
          </div>{' '}
        </div>{' '}
        se traducen.
      </p>
    </T> 
  );
}

2. Traduce componentes de cliente y de servidor

Con compatibilidad de primer nivel para el App Router de Next.js y React Server Components, puedes traducir tanto componentes de cliente como de servidor.

import getName from '@/getName';
import { T, Var } from 'gt-next';

export default async function MyServerComponent() {
  const name = await getName();

  return (
    <T>
      Hola, <Var>{name}</Var>
    </T>
  );
}

'use client';

import { useState } from 'react';
import { T, Var } from 'gt-next';

export default function MyClientComponent() {
  const [name, setName] = useState('Alice');

  return (
    <T>
      Hola, <Var>{name}</Var>
    </T>
  );
}

3. Escribe contenido en línea o en dictionaries

El contenido JSX incluido dentro de un componente <T> se marca para traducción:

import { T } from 'gt-next';

export default function Page() {
  return (
    <T>
      <p>¡Hola, mundo!</p> {/* translates <p>¡Hola, mundo!</p> */}
    </T>
  );
}

Como alternativa, si prefieres el enfoque tradicional de diccionario, puedes escribir tu contenido en un archivo de diccionario:

{
  "greeting": "¡Hola, mundo!"
}

const dictionary = {
  greeting: "¡Hola, mundo!"
}
export default dictionary;

const dictionary = {
  greeting: "¡Hola, mundo!" 
}
export default dictionary;

import { useTranslations } from "gt-next";

export default function Page() {
  const t = useTranslations();
  return t('greeting'); // traduce «¡Hola, mundo!»
}

4. Ver el contenido traducido en desarrollo

No tienes que preocuparte por cómo se ve la interfaz en distintos idiomas, General Translation traducirá automáticamente tu contenido en tiempo real a medida que lo escribes.

En lugar de tener que retocar la UI varias veces en producción, simplemente escribe tu contenido en inglés una vez y deja que General Translation se encargue del resto.

¿Necesitas ver cómo se ven los elementos de la UI en alemán antes de desplegar? No hay problema: ¡General Translation los traducirá automáticamente por ti!

5. Traducir contenido bajo demanda

Las aplicaciones suelen necesitar traducir contenido que solo se conoce en tiempo de ejecución. En Next.js, las bibliotecas de GT permiten traducir contenido bajo demanda.

Algunos ejemplos comunes incluyen:

• Información específica del usuario
• Contenido almacenado de forma remota
• Contenido generado dinámicamente

Una vez cargada la traducción, tu componente se actualizará en tiempo real con el nuevo contenido traducido.

Primeros pasos

npm i gt-next

yarn add gt-next

bun add gt-next

pnpm add gt-next

npm i gt-react

yarn add gt-react

bun add gt-react

pnpm add gt-react

¿Listo para escalar a nivel global? Empieza a traducir tu app en minutos y llega a usuarios de todo el mundo.