# General Translation React SDKs (gt-react, gt-next, gt-react-native): Inicio rápido de Next.js App Router
URL: https://generaltranslation.com/es/docs/react/nextjs-quickstart.mdx
---
title: Inicio rápido de Next.js App Router
description: Añade varios idiomas a una aplicación de Next.js App Router con General Translation en menos de 10 minutos.
related:
links:
- /docs/react/guides/translating-jsx
- /docs/react/guides/translating-strings
- /docs/react/guides/managing-locales
- /docs/react/guides/formatting-variables
---
Al final de esta guía, tu aplicación de Next.js mostrará contenido en varios idiomas, con un selector de idioma con el que tus usuarios podrán interactuar.
**Requisitos previos:**
* Una aplicación de Next.js que use **App Router** (Next.js 13+)
* Node.js 18+
**Consejo:** Ejecuta `npx gt@latest` para configurar todo con el [Asistente de configuración](/docs/cli/quickstart). Esta guía explica la configuración manual.
**Nota:** Si usas Pages Router, sigue el [Inicio rápido de Next.js Pages Router](/docs/react/nextjs-pages-router-quickstart).
## Inicio rápido [#quickstart]
### 1. Instala los paquetes
`gt-next` es la biblioteca que impulsa las traducciones de tu aplicación. `gt` es la herramienta de CLI que prepara las traducciones para Production.
```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
```
### 2. Configura la 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. Envuelve tu configuración actual de Next.js con él. En este fragmento y en los siguientes, las líneas verdes se añaden y las rojas se eliminan; conserva cualquier opción que tu configuración ya tenga:
```ts title="next.config.ts"
import { withGTConfig } from 'gt-next/config'; // [!code ++]
const nextConfig = {};
export default nextConfig; // [!code --]
export default withGTConfig(nextConfig); // [!code ++]
```
Este complemento lee tu configuración de traducción y se encarga de conectar todo internamente. No necesitas hacer ningún otro cambio en tu configuración de Next.js.
### 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 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/dashboard/reference/supported-locales).
* **`files.gt.output`** — donde la CLI guarda los archivos de traducción. `[locale]` se sustituye por cada código de idioma (por ejemplo, `public/_gt/es.json`).
Añade `public/_gt/` a tu **`.gitignore`** — estos archivos se generan, no se escriben a mano:
```txt title=".gitignore"
public/_gt/
```
### 4. Añade una función de carga para traducciones locales
Crea un archivo **[`loadTranslations`](/docs/react/reference/functions/load-translations)** en tu directorio `src/` (o en la raíz del proyecto). Esto le indica a `gt-next` cómo cargar los archivos de traducción generados por el CLI:
```ts title="src/loadTranslations.ts"
export default async function loadTranslations(locale: string) {
const translations = await import(`../public/_gt/${locale}.json`);
return translations.default;
}
```
**Advertencia:** Estos archivos de traducción no existen hasta que los crees, por lo que la primera ejecución de `npm run dev` no compila y la página devuelve un HTTP 500. Ejecuta [`npx gt generate`](/docs/cli/reference/commands/generate) (no se necesita una clave de API) o [`npx gt translate`](/docs/cli/reference/commands/translate) (con credenciales), o añade archivos vacíos `{}` en `public/_gt/[locale].json`.
`withGTConfig` detecta automáticamente un archivo `loadTranslations.[js|ts]` en tu directorio `src/` o en la raíz del proyecto; no requiere configuración adicional.
**Nota:** Las traducciones locales se empaquetan con tu app, por lo que se cargan al instante sin depender de servicios externos. Consulta [Almacenar traducciones](/docs/react/guides/storing-translations) para ver más detalles y sus implicaciones.
### 5. Agrega `GTProvider` a tu layout
El componente **[`GTProvider`](/docs/react/reference/components/gt-provider)** le da a toda tu app acceso a las traducciones. Debe envolver tu app en el nivel del layout raíz. Mantén el resto de tu layout existente (fuentes, metadatos, estilos) tal como está:
```tsx title="app/layout.tsx"
import { GTProvider, useLocale } from 'gt-next'; // [!code ++]
export default function RootLayout({ children }: { children: React.ReactNode }) {
const locale = useLocale(); // [!code ++]
return (
{/* [!code --] */}
{/* [!code ++] */}
{/* [!code --] */}
{children}
{/* [!code ++:3] */}
{children}
);
}
```
### 6. Marcar el contenido para traducir
Ahora, envuelve cualquier texto que quieras traducir con el componente **[``](/docs/react/reference/components/t)**. [``](/docs/react/reference/components/t) significa "traducir":
```tsx title="app/page.tsx"
import { T } from 'gt-next'; // [!code ++]
export default function Home() {
return (
{/* [!code ++] */}
Welcome to my app
This content will be translated automatically.
{/* [!code ++] */}
);
}
```
Puedes envolver dentro de [``](/docs/react/reference/components/t) tanto o tan poco JSX como quieras. Todo lo que haya dentro —texto, elementos anidados e incluso el formato— se traduce como una sola unidad.
### 7. Agrega un selector de idioma
Inserta un **[``](/docs/react/reference/components/locale-selector)** para que los usuarios puedan cambiar de idioma:
```tsx title="app/page.tsx"
import { T } from 'gt-next'; // [!code --]
import { T, LocaleSelector } from 'gt-next'; // [!code ++]
export default function Home() {
return (
{/* [!code ++] */}