Introducción

Primeros pasos

Tenemos guías de inicio rápido para muchos frameworks populares de React.

¿Qué es General Translation?

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

General Translation incluye lo siguiente:

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

Si deseas utilizar las bibliotecas de GT con tu propio proveedor de traducción, consulta nuestra documentación standalone.

Si deseas utilizar tu propia biblioteca de i18n, pero aún quieres usar el servicio de traducción con IA de General Translation, consulta nuestra documentación de herramienta CLI.

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

npx gtx-cli@latest init

¡Ejecuta nuestro asistente de configuración para comenzar!

Características

⚛️ Traduce componentes React completos en línea

• Un solo componente <T> de apertura y cierre es todo lo que necesitas para traducir un componente React completo.
  • No hay necesidad de refactorización compleja o 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 o archivos adicionales!
• La biblioteca gestiona toda la lógica de i18n entre bastidores, para que no tengas que hacerlo.
• 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 características con bibliotecas existentes

• Las bibliotecas GT también admiten las mismas características que las bibliotecas existentes como i18next, react-intl y next-intl.
• Se admiten características 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.
• La recarga en caliente de traducciones actualizará automáticamente tus traducciones mientras las escribes.
• El contenido HTML se reorganiza y personaliza según el idioma.

🔧 Amigable para desarrolladores

• La configuración es simple y se puede hacer 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 usar nuestro servicio de traducción gratuito impulsado por IA.
• No más pérdida de tiempo gestionando claves de traducción como t('menu.header.title').
  • ¡Simplemente 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 completo de infraestructura para aplicaciones multilingües.

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

Para una experiencia de i18n perfecta y completa, recomendamos usar nuestras bibliotecas con nuestro servicio de traducción.

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

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

La interfaz de usuario pasada como hijos del componente <T> será traducida independientemente de lo complicado que 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 componentes tanto del cliente como del servidor

Con soporte de primera clase para el App Router de Next.js y React Server Components, puedes traducir componentes tanto del cliente como del 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 diccionario, puedes escribir tu contenido en un archivo de diccionario:

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

import { useDict } from "gt-next";
 
export default function Page() {
  const d = useDict();
  return d('greeting'); // translates "Hello, World!"
}

4. Ver contenido traducido en desarrollo

No te preocupes por cómo se ve la interfaz de usuario en diferentes idiomas, General Translation traducirá automáticamente tu contenido mientras lo escribes en tiempo real.

En lugar de tener que revisar continuamente tu interfaz de usuario 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 tus elementos de interfaz en alemán antes de implementarlos? ¡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 bibliotecas GT admiten 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 se carga la traducción, reescribirá tu componente en tiempo real con el nuevo contenido traducido.

Primeros pasos

npm i gt-next

¿Listo para globalizarte? ¡Comienza a traducir tu aplicación en minutos y llega a usuarios de todo el mundo!