# gt-next: General Translation Next.js SDK: Speedrun de Next.js
URL: https://generaltranslation.com/es/docs/next/tutorials/examples/next-speedrun.mdx
---
title: Speedrun de Next.js
description: Veamos rápidamente cómo crear una nueva aplicación e internacionalizarla con GT
---
## Resumen
En esta guía, veremos dos cosas:
* Crear una nueva aplicación de Next.js
* Internacionalizarla con General Translation
En total, te llevará menos de 10 minutos.
## Prerrequisitos
Asumimos que tienes experiencia con React y que estás familiarizado con TypeScript.
***
## Paso 1: Crea una nueva aplicación de Next.js
Primero, ve al directorio que prefieras en la terminal y ejecuta el siguiente comando:
```bash copy
npx create-next-app next-quickstart --ts --tailwind --eslint --app --use-npm --src-dir
```
Aparecerá un asistente de configuración; solo tienes que seleccionar el valor predeterminado de cada opción.
## Paso 2: Instala las bibliotecas
Ve al directorio raíz de tu proyecto de Next.js y ejecuta:
```bash copy
cd next-quickstart
npm i gt-next
npm i gt
```
## Paso 3: Agrega tus variables de entorno.
Ve al [Panel de control](https://generaltranslation.com/en-US/signin).
En la barra de navegación, ve a la página Dev Api Keys y crea una nueva clave API y un ID del proyecto.
Luego, agrégalos a tu archivo `.env`.
```bash copy
GT_API_KEY="YOUR_GT_API_KEY"
GT_PROJECT_ID="YOUR_GT_PROJECT_ID"
```
## Paso 4: Ejecuta la herramienta CLI
Ejecuta la herramienta CLI para configurar tu base de código para la traducción.
```bash copy
npx gt setup
```
## Paso 5: Modifica el layout raíz
Modifica la prop `lang` de la etiqueta `` en el archivo `src/app/layout.tsx`.
Debe usar `await getLocale()` para obtener la configuración regional actual.
```javascript title="src/app/layout.tsx" copy
import { GTProvider } from "gt-next"; // [!code highlight]
import { getLocale } from "gt-next/server"; // [!code highlight]
...
export default async function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
const locale = await getLocale(); // [!code highlight]
return (
// [!code highlight]
{children}
);
}
```
## Paso 6: Inicia tu aplicación
¡Tu aplicación ya está internacionalizada! 🎉
¡Vamos a probarla!
Cambia la configuración de idioma de tu navegador.
* Cambia el idioma en [Chrome](https://support.google.com/chrome/answer/173424)
* Cambia el idioma en [Firefox](https://support.mozilla.org/en-US/kb/use-firefox-another-language)
* Cambia el idioma en [Edge](https://support.microsoft.com/en-us/microsoft-edge/use-microsoft-edge-in-another-language-4da8b5e0-11ce-7ea4-81d7-4e332eec551f)
Inicia tu aplicación de Next.js.
```bash copy
npm run dev
```
Abre tu aplicación en el navegador que prefieras (normalmente en [http://localhost:3000](http://localhost:3000)).
Si has configurado todo correctamente, deberías ver tu aplicación en el idioma que tienes establecido en tu navegador.
***
## Solución de problemas
**Cookies del navegador**
Comprueba las cookies del navegador de tu aplicación.
General Translation usa cookies para almacenar la preferencia de idioma del usuario.
La cookie se llama `generaltranslation.locale` y solo tienes que eliminarla.
Estará en `localhost:3000`.
Luego, asegúrate de que estás usando el idioma preferido que quieres y
actualiza la página.
Después de esto, no tendrás que volver a preocuparte por borrar las cookies.
Cómo comprobar las cookies:
* [Chrome](https://support.google.com/chrome/answer/95647)
* [Firefox](https://support.mozilla.org/en-US/kb/delete-cookies-remove-info-websites-stored)
* [Safari](https://support.apple.com/en-mn/guide/safari/sfri11471/16.0/mac/11.0)
* [Edge](https://support.microsoft.com/en-us/microsoft-edge/delete-cookies-in-microsoft-edge-63947406-40ac-c3b8-57b9-2a946a29ae09)
***
## Notas
* Traduce JSX arbitrario con el componente ``.
* Si la traducción no funciona al cambiar de idioma, comprueba las cookies de tu navegador.
## Próximos pasos
* Dale una estrella a nuestro repositorio de GitHub [gt-next](https://github.com/General-Translation/gt-next).
* Configura la [compatibilidad con idiomas de derecha a izquierda](/docs/next/guides/rtl).