Guía rápida de Next.js

Requisitos previos: App Router de Next.js, conocimientos básicos de JavaScript

Configuración rápida: Ejecuta npx gtx-cli@latest para configurar todo automáticamente. Consulta la guía del Asistente de configuración o usa nuestra integración con herramientas de IA.

Instalación

Instala los paquetes gt-next y gtx-cli:

npm i gt-next gtx-cli

yarn add gt-next
yarn add --dev gtx-cli

bun add gt-next
bun add --dev gtx-cli

pnpm add gt-next
pnpm add --save-dev gtx-cli

Configuración

`withGTConfig`

La función withGTConfig inicializa el SDK en tu aplicación de Next.js. Añádela a tu archivo next.config.[js|ts]:

next.config.ts

import { withGTConfig } from 'gt-next/config';

const nextConfig = {
  // Tu configuración actual de Next.js
};

export default withGTConfig(nextConfig, {
  // Opciones adicionales de configuración de GT
});

El componente GTProvider proporciona contexto de traducción a los componentes del lado del cliente. Gestiona el estado del locale, las traducciones y habilita los hooks useGT y useTranslations.

Añade GTProvider al layout raíz (o layouts raíz):

app/layout.tsx

import { GTProvider } from 'gt-next';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <GTProvider>
          {children}
        </GTProvider>
      </body>
    </html>
  );
}

Crea un archivo gt.config.json en la raíz del proyecto:

gt.config.json

{
  "defaultLocale": "en",
  "locales": ["fr", "es", "de"]
}

Personaliza las locales de tu proyecto. Consulta las locales compatibles para ver las options.

Variables de entorno

Añade a tu archivo .env.local para habilitar la recarga en caliente durante el desarrollo:

.env.local

GT_API_KEY="your-dev-api-key"
GT_PROJECT_ID="your-project-id"

Solo para desarrollo: No configures GT_API_KEY en producción; es únicamente para la recarga en caliente durante el desarrollo.

Obtén tus claves de API gratuitas en dash.generaltranslation.com o ejecuta:

npx gtx-cli auth

Uso

Ahora puedes empezar a internacionalizar tu contenido. Hay dos enfoques principales:

Contenido JSX con `<T>`

Envuelve los elementos JSX para traducirlos con el componente <T>:

import { T } from 'gt-next';

function Welcome() {
  return (
    <T>
      <h1>¡Bienvenido a nuestra app!</h1>
    </T>
  );
}

Para contenido dinámico, usa componentes de variables como <Var>:

import { T, Var } from 'gt-next';

function Saludo({ user }) {
  return (
    <T>
      <p>Hola, <Var>{user.name}</Var>!</p>
    </T>
  );
}

Consulta la guía sobre usar el componente <T> para obtener más información.

Cadenas simples con `useGT`

Para atributos, etiquetas y texto sin formato con el hook useGT:

import { useGT } from 'gt-next';

function ContactForm() {
  const t = useGT();
  
  return (
    <input 
      placeholder={t('Ingresa tu correo electrónico')}
      aria-label={t('Campo de entrada de correo electrónico')}
    />
  );
}

Para los componentes de servidor, usa getGT en lugar de useGT.

Consulta la guía sobre traducción de cadenas para obtener más información.

Prueba tu app

Prueba tus traducciones cambiando de idioma:

Agrega un menú desplegable para elegir el locale usando <LocaleSelector>:

import { LocaleSelector } from 'gt-next';

function App() {
  return <LocaleSelector />;
}

Inicia tu servidor de desarrollo:

npm run dev

yarn run dev

bun run dev

pnpm run dev

Visita localhost:3000 y cambia el idioma desde el menú desplegable de selección de locale.

En desarrollo, las traducciones se realizan bajo demanda (verás una breve carga). En producción, todo está pretraducido.

Solución de problemas

Implementación

Para producción, debes pretraducir el contenido, ya que la traducción en tiempo de ejecución está deshabilitada (excepto para las funciones <Tx> y tx).

Obtén una clave de API de producción en dash.generaltranslation.com.

Las claves de producción comienzan con gtx-api- (a diferencia de las claves de desarrollo, que empiezan con gtx-dev-). Obtén más información sobre las diferencias entre entornos.
Agrega a tu entorno de CI/CD:
```
GT_PROJECT_ID=your-project-id
GT_API_KEY=gtx-api-your-production-key
```
Nunca antepongas NEXT_PUBLIC_ a las claves de producción: deben permanecer solo en el servidor.
Ejecuta el comando de traducción para traducir tu contenido:
```
npx gtx-cli translate
```
Puedes configurar el comportamiento del comando de traducción con el archivo gt.config.json.

Consulta la guía de referencia de la CLI para más información.

Actualiza tu script de compilación para traducir antes de compilar:

package.json

{
  "scripts": {
    "build": "npx gtx-cli translate && <...YOUR_BUILD_COMMAND...>"
  }
}

Próximos pasos

Guía del componente <T> - Análisis detallado del componente <T> y la traducción en JSX
Guía de traducción de cadenas - Uso de useGT y getGT
Componentes de variables - Gestiona contenido dinámico con <Var>, <Num>, etc.

Requisitos previos: App Router de Next.js, conocimientos básicos de JavaScript

Configuración rápida: Ejecuta npx gtx-cli@latest para configurar todo automáticamente. Consulta la guía del Asistente de configuración o usa nuestra integración con herramientas de IA.

Instalación

Instala los paquetes gt-next y gtx-cli:

npm i gt-next gtx-cli

yarn add gt-next
yarn add --dev gtx-cli

bun add gt-next
bun add --dev gtx-cli

pnpm add gt-next
pnpm add --save-dev gtx-cli

Configuración

`withGTConfig`

La función withGTConfig inicializa el SDK en tu aplicación de Next.js. Añádela a tu archivo next.config.[js|ts]:

next.config.ts

import { withGTConfig } from 'gt-next/config';

const nextConfig = {
  // Tu configuración actual de Next.js
};

export default withGTConfig(nextConfig, {
  // Opciones adicionales de configuración de GT
});

`GTProvider`

Añade GTProvider al layout raíz (o layouts raíz):

app/layout.tsx

import { GTProvider } from 'gt-next';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <GTProvider>
          {children}
        </GTProvider>
      </body>
    </html>
  );
}

Crea un archivo gt.config.json en la raíz del proyecto:

gt.config.json

{
  "defaultLocale": "en",
  "locales": ["fr", "es", "de"]
}

Personaliza las locales de tu proyecto. Consulta las locales compatibles para ver las options.

Variables de entorno

Añade a tu archivo .env.local para habilitar la recarga en caliente durante el desarrollo:

.env.local

GT_API_KEY="your-dev-api-key"
GT_PROJECT_ID="your-project-id"

Solo para desarrollo: No configures GT_API_KEY en producción; es únicamente para la recarga en caliente durante el desarrollo.

Obtén tus claves de API gratuitas en dash.generaltranslation.com o ejecuta:

npx gtx-cli auth

Uso

Ahora puedes empezar a internacionalizar tu contenido. Hay dos enfoques principales:

Contenido JSX con `<T>`

Envuelve los elementos JSX para traducirlos con el componente <T>:

import { T } from 'gt-next';

function Welcome() {
  return (
    <T>
      <h1>¡Bienvenido a nuestra app!</h1>
    </T>
  );
}

Para contenido dinámico, usa componentes de variables como <Var>:

import { T, Var } from 'gt-next';

function Saludo({ user }) {
  return (
    <T>
      <p>Hola, <Var>{user.name}</Var>!</p>
    </T>
  );
}

Consulta la guía sobre usar el componente <T> para obtener más información.

Cadenas simples con `useGT`

Para atributos, etiquetas y texto sin formato con el hook useGT:

import { useGT } from 'gt-next';

function ContactForm() {
  const t = useGT();
  
  return (
    <input 
      placeholder={t('Ingresa tu correo electrónico')}
      aria-label={t('Campo de entrada de correo electrónico')}
    />
  );
}

Para los componentes de servidor, usa getGT en lugar de useGT.

Consulta la guía sobre traducción de cadenas para obtener más información.

Prueba tu app

Prueba tus traducciones cambiando de idioma:

Agrega un menú desplegable para elegir el locale usando <LocaleSelector>:

import { LocaleSelector } from 'gt-next';

function App() {
  return <LocaleSelector />;
}

Inicia tu servidor de desarrollo:

npm run dev

yarn run dev

bun run dev

pnpm run dev

Visita localhost:3000 y cambia el idioma desde el menú desplegable de selección de locale.

En desarrollo, las traducciones se realizan bajo demanda (verás una breve carga). En producción, todo está pretraducido.

Solución de problemas

Implementación

Para producción, debes pretraducir el contenido, ya que la traducción en tiempo de ejecución está deshabilitada (excepto para las funciones <Tx> y tx).

Obtén una clave de API de producción en dash.generaltranslation.com.

Las claves de producción comienzan con gtx-api- (a diferencia de las claves de desarrollo, que empiezan con gtx-dev-). Obtén más información sobre las diferencias entre entornos.
Agrega a tu entorno de CI/CD:
```
GT_PROJECT_ID=your-project-id
GT_API_KEY=gtx-api-your-production-key
```
Nunca antepongas NEXT_PUBLIC_ a las claves de producción: deben permanecer solo en el servidor.
Ejecuta el comando de traducción para traducir tu contenido:
```
npx gtx-cli translate
```
Puedes configurar el comportamiento del comando de traducción con el archivo gt.config.json.

Consulta la guía de referencia de la CLI para más información.

Actualiza tu script de compilación para traducir antes de compilar:

package.json

{
  "scripts": {
    "build": "npx gtx-cli translate && <...YOUR_BUILD_COMMAND...>"
  }
}

Próximos pasos

Guía del componente <T> - Análisis detallado del componente <T> y la traducción en JSX
Guía de traducción de cadenas - Uso de useGT y getGT
Componentes de variables - Gestiona contenido dinámico con <Var>, <Num>, etc.

Requisitos previos: App Router de Next.js, conocimientos básicos de JavaScript

Configuración rápida: Ejecuta npx gtx-cli@latest para configurar todo automáticamente. Consulta la guía del Asistente de configuración o usa nuestra integración con herramientas de IA.

Instalación

Instala los paquetes gt-next y gtx-cli:

npm i gt-next gtx-cli

yarn add gt-next
yarn add --dev gtx-cli

bun add gt-next
bun add --dev gtx-cli

pnpm add gt-next
pnpm add --save-dev gtx-cli

Configuración

`withGTConfig`

La función withGTConfig inicializa el SDK en tu aplicación de Next.js. Añádela a tu archivo next.config.[js|ts]:

next.config.ts

import { withGTConfig } from 'gt-next/config';

const nextConfig = {
  // Tu configuración actual de Next.js
};

export default withGTConfig(nextConfig, {
  // Opciones adicionales de configuración de GT
});

`GTProvider`

Añade GTProvider al layout raíz (o layouts raíz):

app/layout.tsx

import { GTProvider } from 'gt-next';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <GTProvider>
          {children}
        </GTProvider>
      </body>
    </html>
  );
}

Crea un archivo gt.config.json en la raíz del proyecto:

gt.config.json

{
  "defaultLocale": "en",
  "locales": ["fr", "es", "de"]
}

Personaliza las locales de tu proyecto. Consulta las locales compatibles para ver las options.

Variables de entorno

Añade a tu archivo .env.local para habilitar la recarga en caliente durante el desarrollo:

.env.local

GT_API_KEY="your-dev-api-key"
GT_PROJECT_ID="your-project-id"

Solo para desarrollo: No configures GT_API_KEY en producción; es únicamente para la recarga en caliente durante el desarrollo.

Obtén tus claves de API gratuitas en dash.generaltranslation.com o ejecuta:

npx gtx-cli auth

Uso

Ahora puedes empezar a internacionalizar tu contenido. Hay dos enfoques principales:

Contenido JSX con `<T>`

Envuelve los elementos JSX para traducirlos con el componente <T>:

import { T } from 'gt-next';

function Welcome() {
  return (
    <T>
      <h1>¡Bienvenido a nuestra app!</h1>
    </T>
  );
}

Para contenido dinámico, usa componentes de variables como <Var>:

import { T, Var } from 'gt-next';

function Saludo({ user }) {
  return (
    <T>
      <p>Hola, <Var>{user.name}</Var>!</p>
    </T>
  );
}

Consulta la guía sobre usar el componente <T> para obtener más información.

Cadenas simples con `useGT`

Para atributos, etiquetas y texto sin formato con el hook useGT:

import { useGT } from 'gt-next';

function ContactForm() {
  const t = useGT();
  
  return (
    <input 
      placeholder={t('Ingresa tu correo electrónico')}
      aria-label={t('Campo de entrada de correo electrónico')}
    />
  );
}

Para los componentes de servidor, usa getGT en lugar de useGT.

Consulta la guía sobre traducción de cadenas para obtener más información.

Prueba tu app

Prueba tus traducciones cambiando de idioma:

Agrega un menú desplegable para elegir el locale usando <LocaleSelector>:

import { LocaleSelector } from 'gt-next';

function App() {
  return <LocaleSelector />;
}

Inicia tu servidor de desarrollo:

npm run dev

yarn run dev

bun run dev

pnpm run dev

Visita localhost:3000 y cambia el idioma desde el menú desplegable de selección de locale.

En desarrollo, las traducciones se realizan bajo demanda (verás una breve carga). En producción, todo está pretraducido.

Solución de problemas

Implementación

Para producción, debes pretraducir el contenido, ya que la traducción en tiempo de ejecución está deshabilitada (excepto para las funciones <Tx> y tx).

Obtén una clave de API de producción en dash.generaltranslation.com.

Las claves de producción comienzan con gtx-api- (a diferencia de las claves de desarrollo, que empiezan con gtx-dev-). Obtén más información sobre las diferencias entre entornos.
Agrega a tu entorno de CI/CD:
```
GT_PROJECT_ID=your-project-id
GT_API_KEY=gtx-api-your-production-key
```
Nunca antepongas NEXT_PUBLIC_ a las claves de producción: deben permanecer solo en el servidor.
Ejecuta el comando de traducción para traducir tu contenido:
```
npx gtx-cli translate
```
Puedes configurar el comportamiento del comando de traducción con el archivo gt.config.json.

Consulta la guía de referencia de la CLI para más información.

Actualiza tu script de compilación para traducir antes de compilar:

package.json

{
  "scripts": {
    "build": "npx gtx-cli translate && <...YOUR_BUILD_COMMAND...>"
  }
}

Próximos pasos

Guía del componente <T> - Análisis detallado del componente <T> y la traducción en JSX
Guía de traducción de cadenas - Uso de useGT y getGT
Componentes de variables - Gestiona contenido dinámico con <Var>, <Num>, etc.

Guía rápida de Next.js

¿Qué pasa si no quiero usar la plataforma de General Translation?

El idioma de mi app no cambia, aunque ya cambié el idioma de mi navegador.

¿Por qué los idiomas tardan en cargarse en desarrollo?

¿Por qué algunas traducciones son inexactas?

¿Y si no estoy usando la plataforma de General Translation?

En esta página

Guía rápida de Next.js

¿Qué pasa si no quiero usar la plataforma de General Translation?

El idioma de mi app no cambia, aunque ya cambié el idioma de mi navegador.

¿Por qué los idiomas tardan en cargarse en desarrollo?

¿Por qué algunas traducciones son inexactas?

¿Y si no estoy usando la plataforma de General Translation?

En esta página

Guía rápida de Next.js

¿Qué pasa si no quiero usar la plataforma de General Translation?

El idioma de mi app no cambia, aunque ya cambié el idioma de mi navegador.

¿Por qué los idiomas tardan en cargarse en desarrollo?

¿Por qué algunas traducciones son inexactas?

¿Y si no estoy usando la plataforma de General Translation?

En esta página

GitHubDestacar en GitHub

GitHubDestacar en GitHub

Destacar en GitHub

Destacar en GitHub