Configuración

Uso

npx gtx-cli setup

El comando gtx-cli setup configura automáticamente tu proyecto para traducción con gt-next o gt-react. Lo hace analizando el árbol de archivos de tu proyecto y utilizando babel para envolver el contenido estático con el componente <T>. Cualquier contenido dinámico será automáticamente envuelto con componentes <Var>.

Este comando debe ejecutarse una vez, cuando estás internacionalizando tu proyecto por primera vez. En cambios posteriores, debes usar el comando scan para actualizar tu proyecto.

Consulta el comando scan para más detalles.

src/app/Home.js

import { T, Var } from 'gt-next';  
 
export default function Home({ user }) {
  return (
    <div>
      <T id="app.home.0">
        Hello, World! My name is <Var>{ user.name }</Var>
      </T>
    </div>
  );
}

Si tu proyecto está utilizando el App Router de Next.js, el comando setup añadirá un componente <GTProvider> dentro del archivo layout.jsx correspondiente.

Parámetros

Parámetro	Descripción	Tipo	Opcional	Predeterminado
`--src <path>`	El directorio fuente a escanear	`string`	`true`	`./src && ./app && ./pages && ./components`
`--config <path>`	La ruta al archivo de configuración GT	`string`	`true`	`"gt.config.json"`

Comportamiento

Archivo de configuración

Al ejecutar la herramienta CLI por primera vez, intentará crear un archivo gt.config.json en la raíz de tu proyecto. Este archivo contiene metadatos sobre tu proyecto que se utilizan para traducir tu contenido.

Lee más sobre el archivo gt.config.json aquí.

La prop `id`

El comando setup ofrece la opción de generar automáticamente IDs únicos para tus componentes <T>. Esto es útil para proyectos que utilizan muchos componentes <T> y quieren evitar tener que asignar manualmente un ID único a cada uno.

Este id es útil para referenciar traducciones específicas en el editor de traducciones y en la consola.

Comportamiento de inyección de `<T>`

Caso básico

La CLI envolverá elementos JSX al nivel más alto posible. Esto significa que envolverá todo el componente en un componente <T> si aún no está envuelto.

<div>Hello, World!</div> -> <T id="SOME_ID"><div>Hello, World!</div></T>

Consulta la referencia para más detalles sobre cómo se envuelve el componente <T>.

Comportamiento de `<GTProvider>`

Para el App Router de Next.js, el comando setup envolverá automáticamente el componente <T> en un componente <GTProvider> dentro del archivo layout.jsx apropiado.

Además, configurará el plugin withGTConfig de Next.js en el archivo next.config.js por ti.

Formato automático

El comando setup formateará automáticamente los cambios que realiza en tu código base con Prettier, Biome o ESLint dependiendo de la configuración de tu proyecto.