Primeros pasos

Selecciona tu framework de React para empezar:

npx gtx-cli@latest

¿Qué es General Translation?

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

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 servir contenido de traducción

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

Si deseas usar tu propia biblioteca de i18n, pero aun así quieres utilizar 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 init

¡Ejecuta nuestro asistente de configuración para empezar!

Funcionalidades

⚛️ Traduce componentes completos de React en línea

• Un único componente <T> de apertura y cierre es todo lo que necesitas para traducir un componente completo de React.
  • No hace falta refactorizar en complejidad ni usar llamadas de función engorrosas.
• El contenido está en línea y en la misma ubicación que tu código.
  • ¡No se necesitan keys, strings ni archivos adicionales!
• La biblioteca gestiona toda la lógica de i18n entre bastidores, 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 el texto se
        traduciría en contexto.
      </p>
      <div>
        <div>
          <p>Incluso los componentes profundamente anidados se traducen en contexto.</p>
          <button>¡Haz clic!</button>
        </div>
      </div>
    </T> 
  );
}

🔎 Paridad de funcionalidades con bibliotecas existentes

• Las bibliotecas de GT también ofrecen las mismas funcionalidades que bibliotecas existentes como i18next, react-intl y next-intl.
• Se admiten funcionalidades como dictionaries, plurales, monedas y enrutamiento automático.

🧠 Servicio de traducción gratuito con IA

• Nuestro servicio de traducción con IA, gratuito, te permite crear traducciones para tu app en segundos.
• El hot reload de traducciones actualiza automáticamente tus traducciones mientras las escribes.
• El contenido HTML se reordena y se adapta según el idioma.

🔧 Para desarrolladores

• La configuración es simple y se hace 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 de traducción con IA, gratuito.
• Deja de perder 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 pila completa de i18n, que incluye bibliotecas para desarrolladores, traducciones con IA y un paquete de infraestructura integral para apps 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 y 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>
        Cualquier contenido hijo del <b>componente {`<T>`}</b> será traducido.
      </p>
      <p>
        Cosas 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 tanto del cliente como del servidor

Con compatibilidad de primera clase con 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 inline o en dictionaries

El contenido JSX colocado 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> {/* traduce <p>¡Hola, mundo!</p> */}
    </T>
  );
}

Como alternativa, si prefieres usar el enfoque clásico de diccionario, puedes escribir tu contenido en un archivo de diccionario:

{
  "greeting": "Hello, world!"
}

const dictionary = {
  greeting: "Hello, world!"
}
export default dictionary;

const dictionary = {
  greeting: "Hello, world!" 
}
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 necesitas preocuparte por cómo se ve la UI en diferentes idiomas, General Translation traducirá automáticamente tu contenido en tiempo real mientras lo escribes.

En lugar de tener que revisar tu UI una y otra vez 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 tus elementos de UI en alemán antes de desplegar? No hay problema: General Translation los traducirá automáticamente por ti.

5. Traducir contenido bajo demanda

Las apps a menudo necesitan traducir contenido que solo está disponible 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, el 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 expandirte globalmente? Empieza a traducir tu app en minutos y llega a usuarios de todo el mundo.