# gt-next: General Translation Next.js SDK: Inicio rápido de Next.js
URL: https://generaltranslation.com/es/docs/next.mdx
---
title: Inicio rápido de Next.js
description: Agrega varios idiomas a tu aplicación de Next.js en menos de 10 minutos
---
Al final de esta guía, tu aplicación de Next.js mostrará contenido en varios idiomas, con un selector de idioma que tus usuarios podrán usar.
**Prerrequisitos:**
* Una aplicación 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). En esta guía se explica la configuración manual.
***
## Paso 1: Instala los paquetes
`gt-next` es la biblioteca que hace funcionar las traducciones en tu aplicación. `gt` es la herramienta CLI 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 tu archivo de configuración de Next.js
`gt-next` usa un plugin de Next.js llamado **`withGTConfig`** para configurar la internacionalización en tiempo de compilación. Úsalo para envolver tu configuración existente 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 lo conecta todo en segundo plano. No necesitas hacer ningún otro cambio en tu configuración de Next.js.
***
## Paso 3: Crea un archivo de configuración para las traducciones
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 aplicación (tu idioma de origen).
* **`locales`** — los idiomas a los que quieres traducir. Elige cualquiera de la [lista de configuraciones regionales compatibles](/docs/platform/supported-locales).
* **`files.gt.output`** — donde la CLI guarda los archivos de traducción. `[locale]` se reemplaza por cada código de idioma (p. ej., `public/_gt/es.json`).
Agrega `public/_gt/` a tu **`.gitignore`** — estos archivos se generan, no se escriben manualmente:
```txt title=".gitignore"
public/_gt/
```
***
## Paso 4: Agrega el GTProvider a tu layout
El componente **`GTProvider`** permite que toda tu aplicación acceda a las traducciones. Debe envolver tu 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 de servidor**: carga las traducciones en el servidor y las transmite a tus componentes de cliente.
***
## Paso 5: Marca el contenido para su traducción
Ahora, envuelve el texto que quieras traducir con el componente **``**. `` significa "translate":
```tsx title="app/page.tsx"
import { T } from 'gt-next';
export default function Home() {
return (
bienvenido a mi aplicación
este contenido se traducir automáticamente
);
}
```
Puedes envolver dentro de `` tanto JSX como quieras, ya sea mucho o poco. Todo lo que contiene —texto, elementos anidados e incluso formato— se traduce como una sola unidad.
***
## Paso 6: Agregar un selector de idioma
Agrega 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 (