# 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
Docs index: https://generaltranslation.com/llms.txt
Description: Añade varios idiomas a una aplicación de Next.js App Router con General Translation 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 con el que tus usuarios podrán interactuar.
**Requisitos previos:**
* Una aplicación de Next.js que use **App Router** (Next.js 13.0.0 o posterior, excepto 15.2.1 y 15.2.2)
* 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 ++] */}