# gt-next: General Translation Next.js SDK: Speedrun Next.js
URL: https://generaltranslation.com/it/docs/next/tutorials/examples/next-speedrun.mdx
---
title: Speedrun Next.js
description: Creiamo rapidamente una nuova app e internazionalizziamola con GT
---
## Panoramica
In questa guida vedremo due cose:
* Creare una nuova app Next.js
* Internazionalizzarla con General Translation
In tutto, dovrebbe richiedere meno di 10 minuti.
## Prerequisiti
Presupponiamo che tu abbia già esperienza con React e una certa familiarità con TypeScript.
***
## Passaggio 1: Crea una nuova app Next.js
Per prima cosa, vai nella directory che preferisci nel terminale ed esegui il comando seguente:
```bash copy
npx create-next-app next-quickstart --ts --tailwind --eslint --app --use-npm --src-dir
```
Apparirà una procedura guidata di setup; ti basta selezionare il valore predefinito per ogni opzione.
## Passaggio 2: Installa le librerie
Vai alla directory radice del tuo progetto Next.js ed esegui:
```bash copy
cd next-quickstart
npm i gt-next
npm i gt
```
## Passaggio 3: aggiungi le variabili d'ambiente.
Vai alla [Dashboard](https://generaltranslation.com/en-US/signin).
Nella barra di navigazione, vai alla pagina Dev Api Keys e crea una nuova chiave API e un ID progetto.
Quindi aggiungili al file `.env`.
```bash copy
GT_API_KEY="YOUR_GT_API_KEY"
GT_PROJECT_ID="YOUR_GT_PROJECT_ID"
```
## Passaggio 4: Esegui lo strumento CLI
Esegui lo strumento CLI per preparare il codebase alla traduzione.
```bash copy
npx gt setup
```
## Passaggio 5: Modifica il layout radice
Modifica la prop `lang` nel tag `` del file `src/app/layout.tsx`.
Dovrebbe usare `await getLocale()` per ottenere l'impostazione regionale corrente.
```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}
);
}
```
## Passaggio 6: avvia la tua app
La tua app è internazionalizzata! 🎉
Proviamola!
Cambiamo le impostazioni della lingua del browser.
* Cambia la lingua in [Chrome](https://support.google.com/chrome/answer/173424)
* Cambia la lingua in [Firefox](https://support.mozilla.org/en-US/kb/use-firefox-another-language)
* Cambia la lingua in [Edge](https://support.microsoft.com/en-us/microsoft-edge/use-microsoft-edge-in-another-language-4da8b5e0-11ce-7ea4-81d7-4e332eec551f)
Avvia la tua app Next.js.
```bash copy
npm run dev
```
Apri l'app nel browser che preferisci (di solito su [http://localhost:3000](http://localhost:3000)).
Se hai configurato tutto correttamente, dovresti vedere l'app nella lingua impostata nel browser.
***
## Risoluzione dei problemi
**Cookie del browser**
Controlla i cookie del browser per la tua app.
General Translation usa i cookie per memorizzare la preferenza della lingua dell'utente.
Il cookie si chiama `generaltranslation.locale` e ti basta eliminarlo.
Lo troverai sotto `localhost:3000`.
Poi verifica di aver selezionato la lingua preferita desiderata e
aggiorna la pagina.
Dopo questo, non dovrai più preoccuparti di cancellare i cookie.
Come controllare i cookie:
* [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)
***
## Note
* Traduci qualsiasi JSX con il componente ``.
* Se la traduzione non funziona quando cambi lingua, controlla i cookie del browser.
## Passaggi successivi
* Metti una stella al nostro repository GitHub [gt-next](https://github.com/General-Translation/gt-next).
* Configura il [supporto per le lingue da destra a sinistra](/docs/next/guides/rtl).