Inicio rápido

Comenzando

Haz clic en tu framework de React para comenzar:

Alternativamente, puedes ejecutar el Asistente de Configuración.

npx gtx-cli@latest

¿Qué es General Translation?

General Translation es una pila completa de internacionalización (i18n) que te permite lanzar aplicaciones 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 servir contenido traducido

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 aún 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 comenzar!

Características

⚛️ Traduce componentes completos de React en línea

• Un solo componente <T> de apertura y cierre es todo lo que necesitas para traducir un componente completo de React.
  • No necesitas hacer refactorizaciones complejas ni llamadas de función desordenadas.
• El contenido está en línea y en la misma ubicación que tu código.
  • ¡No se necesitan claves, cadenas ni archivos adicionales!
• La biblioteca gestiona toda la lógica de i18n en segundo plano, para que no tengas que hacerlo tú.
• Las traducciones siempre se mantienen sincronizadas con tu código fuente.
• Las traducciones contienen información contextual sobre el contenido, por lo que son más precisas.

export default function Page() {
  return (
    <T>
      <p>You can write any JSX as children of the {"<T>"} component.</p>
      <p>
        For example, you could write a <a href="/">link</a> and have the text be
        translated in context.
      </p>
      <div>
        <div>
          <p>Even deeply nested components are translated in context.</p>
          <button>Click me!</button>
        </div>
      </div>
    </T> 
  );
}

🔎 Paridad de funciones con bibliotecas existentes

• Las bibliotecas GT también admiten 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 gratuito impulsado por IA

• Nuestro servicio de traducción gratuito impulsado por IA te permite crear traducciones para tu aplicación en segundos.
• Recarga en caliente de traducciones actualizará automáticamente tus traducciones a medida que las escribes.
• El contenido HTML se reorganiza y personaliza según el idioma.

🔧 Amigable para desarrolladores

• La configuración es sencilla y puede hacerse en minutos.
• Todas las bibliotecas 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').
  • ¡Solo 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 un stack completo de i18n, que incluye librerías para desarrolladores, traducciones con IA, y un paquete de infraestructura completo para aplicaciones multilingües.

Puedes combinar nuestras librerías con tu propio proveedor de traducción, o usar nuestro servicio gratuito de traducción con IA junto con tu propia librería de i18n.

Para una experiencia de i18n fluida y completa, recomendamos usar nuestras librerías con nuestro servicio de traducción.

Con las librerías GT como gt-react y gt-next, puedes:

1. Traducir componentes completos de React, no solo cadenas de texto

La UI pasada como children del componente <T> será traducida sin importar qué tan complicado sea el árbol JSX. Por ejemplo:

import { T } from "gt-next";

export default function Page() {
  return (
    <T>
      <p>Any children of <b>the {`<T>`} component</b> will be translated.</p>
      <p>
        Things like <a href="/">links</a>{', '}
        <button>buttons</button>{', '}
        and even <div> <div> <div> deeply nested components </div> </div> </div>  are translated.
      </p>
    </T> 
  );
}

2. Traducir tanto componentes cliente como servidor

Con soporte de primera clase para el App Router de Next.js y React Server Components, puedes traducir tanto componentes cliente como servidor.

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

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

  return (
    <T>
      Hello, <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>
      Hello, <Var>{name}</Var>
    </T>
  );
}

3. Escribir contenido en línea o en diccionarios

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>Hello, world!</p>  {/* translates <p>Hello, world!</p> */}
    </T>
  )
}

Alternativamente, si prefieres usar el enfoque histórico de diccionarios, 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'); // translates "Hello, world!"
}

4. Ver contenido traducido en desarrollo

No necesitas preocuparte por cómo se ve la UI en diferentes idiomas, General Translation traducirá automáticamente tu contenido mientras lo escribes en tiempo real.

En lugar de tener que revisar continuamente tu UI múltiples 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 tus elementos de UI en alemán antes de desplegar? No hay problema, ¡General Translation los traducirá automáticamente para ti!

5. Traducir contenido bajo demanda

Las aplicaciones a menudo necesitan traducir contenido que solo se conoce en tiempo de ejecución. Para Next.js, las librerías GT soportan la capacidad de traducir contenido bajo demanda.

Algunos ejemplos comunes incluyen:

• Información específica del usuario
• Contenido almacenado remotamente
• Contenido que se genera dinámicamente

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

Comienza

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 globalizarte? ¡Comienza a traducir tu aplicación en minutos y llega a usuarios de todo el mundo!