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 traducido

Si deseas utilizar las bibliotecas 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.

Características

⚛️ Traduce componentes completos de React en línea

• Un solo componente de apertura y cierre <T> es todo lo que necesitas para traducir un componente completo de React.
  • No es necesario realizar refactorizaciones complejas o llamadas a funciones 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 gratuito de traducción 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 gratuito de traducción 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 de infraestructura completo 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 completos de React, 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. Traduce 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. Escribe contenido en línea o en diccionarios

El contenido JSX colocado dentro de un componente <T> está marcado para traducción:

import { T } from "gt-next";
 
export default function Page() {
  return (
    <T>
      <p>Hello, World!</p>  {/* traduce <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'); // traduce "Hello, World!"
}

4. Visualiza el 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. Traduce 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.

Comenzar

npm i gt-next

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