# gt-next: General Translation Next.js SDK: Guía rápida de Next.js
URL: https://generaltranslation.com/es/docs/next.mdx
---
title: Guía rápida de Next.js
description: Agrega varios idiomas a tu app de Next.js en menos de 10 minutos
---
Al final de esta guía, tu app de Next.js mostrará contenido en varios idiomas e incluirá un selector de idioma con el que tus usuarios podrán interactuar.
**Requisitos previos:**
* Una app de Next.js que use el **App Router** (Next.js 13+)
* Node.js 18+
**¿Quieres una configuración automática?** Ejecuta `npx gt@latest` para configurar todo con el [Asistente de configuración](/docs/cli/init). Esta guía explica cómo hacerlo manualmente.
***
## Paso 1: Instala los paquetes
`gt-next` es la biblioteca que habilita las traducciones en tu aplicación. `gt` es la herramienta de línea de comandos que prepara las traducciones para producción.
```bash
npm i gt-next
npm i -D gt
```
```bash
yarn add gt-next
yarn add --dev gt
```
```bash
bun add gt-next
bun add --dev gt
```
```bash
pnpm add gt-next
pnpm add --save-dev gt
```
***
## Paso 2: Configura la configuración de Next.js
`gt-next` usa un plugin de Next.js llamado **`withGTConfig`** para configurar la internacionalización en la fase de compilación. Envuelve con él tu configuración actual de Next.js:
```ts title="next.config.ts"
import { withGTConfig } from 'gt-next/config';
const nextConfig = {};
export default withGTConfig(nextConfig);
```
Este plugin lee tu configuración de traducción y se encarga de conectarlo todo en segundo plano. No hace falta ningún otro cambio en tu configuración de Next.js.
***
## Paso 3: Crea un archivo de configuración de traducción
Crea un archivo **`gt.config.json`** en la raíz de tu proyecto. Esto le indica a la biblioteca qué idiomas admites:
```json title="gt.config.json"
{
"defaultLocale": "en",
"locales": ["es", "fr", "ja"],
"files": {
"gt": {
"output": "public/_gt/[locale].json"
}
}
}
```
* **`defaultLocale`** — el idioma en el que está escrita tu app (tu idioma de origen).
* **`locales`** — los idiomas a los que quieres traducir. Elige cualquiera de la [lista de configuraciones regionales admitidas](/docs/platform/supported-locales).
* **`files.gt.output`** — dónde el CLI guarda los archivos de traducción. `[locale]` se sustituye por cada código de idioma (por ejemplo, `public/_gt/es.json`).
Agrega `public/_gt/` a tu **`.gitignore`** — estos archivos se generan; no se escriben a mano:
```txt title=".gitignore"
public/_gt/
```
***
## Paso 4: Añade GTProvider a tu layout
El componente **`GTProvider`** le da acceso a las traducciones a toda tu aplicación. Debe envolver la aplicación en el layout raíz:
```tsx title="app/layout.tsx"
import { GTProvider } from 'gt-next';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
`GTProvider` es un **componente del servidor**: carga las traducciones en el servidor y se las pasa a tus componentes cliente.
***
## Paso 5: Marca el contenido para traducir
Ahora, envuelve cualquier texto que quieras traducir con el componente **``**. `` significa "traducir":
```tsx title="app/page.tsx"
import { T } from 'gt-next';
export default function Home() {
return (
Welcome to my app
This content will be translated automatically.
);
}
```
Puedes envolver dentro de `` tanto o tan poco JSX como quieras. Todo lo que contiene —texto, elementos anidados e incluso el formato— se traduce como una sola unidad.
***
## Paso 6: Agrega un selector de idioma
Añade un **``** para que los usuarios puedan cambiar de idioma:
```tsx title="app/page.tsx"
import { T, LocaleSelector } from 'gt-next';
export default function Home() {
return (