# gt-next: General Translation Next.js SDK: Guida rapida di Next.js
URL: https://generaltranslation.com/it/docs/next.mdx
---
title: Guida rapida di Next.js
description: Aggiungi più lingue alla tua app Next.js in meno di 10 minuti
---
Al termine di questa guida, la tua app Next.js mostrerà contenuti in più lingue, con un selettore di lingua con cui gli utenti potranno interagire.
**Prerequisiti:**
* Un'app Next.js che usa l'**App Router** (Next.js 13+)
* Node.js 18+
**Vuoi una configurazione automatica?** Esegui `npx gt@latest` per configurare tutto con la [procedura guidata di setup](/docs/cli/init). Questa guida illustra il setup manuale.
***
## Passaggio 1: Installa i pacchetti
`gt-next` è la libreria che gestisce le traduzioni nella tua app. `gt` è lo strumento CLI che prepara le traduzioni per l’ambiente di produzione.
```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
```
***
## Passaggio 2: Configura la configurazione di Next.js
`gt-next` usa un plugin di Next.js chiamato **`withGTConfig`** per configurare l'internazionalizzazione in fase di build. Avvolgi la configurazione Next.js esistente con questo plugin:
```ts title="next.config.ts"
import { withGTConfig } from 'gt-next/config';
const nextConfig = {};
export default withGTConfig(nextConfig);
```
Questo plugin legge le impostazioni di traduzione e configura tutto automaticamente dietro le quinte. Non sono necessarie altre modifiche alla configurazione di Next.js.
***
## Passaggio 3: Crea un file di configurazione delle traduzioni
Crea un file **`gt.config.json`** nella cartella principale del progetto. Questo indica alla libreria quali lingue sono supportate:
```json title="gt.config.json"
{
"defaultLocale": "en",
"locales": ["es", "fr", "ja"],
"files": {
"gt": {
"output": "public/_gt/[locale].json"
}
}
}
```
* **`defaultLocale`** — la lingua in cui è scritta la tua app (la lingua di origine).
* **`locales`** — le lingue in cui vuoi tradurre. Scegli quelle che ti servono dall'[elenco delle impostazioni regionali supportate](/docs/platform/supported-locales).
* **`files.gt.output`** — dove la CLI salva i file di traduzione. `[locale]` viene sostituito con ciascun codice lingua (ad esempio, `public/_gt/es.json`).
Aggiungi `public/_gt/` al tuo **`.gitignore`** — questi file vengono generati, non scritti manualmente:
```txt title=".gitignore"
public/_gt/
```
***
## Passaggio 4: Aggiungi GTProvider al layout
Il componente **`GTProvider`** rende le traduzioni accessibili a tutta l'app. Deve avvolgere l'app a livello del layout radice:
```tsx title="app/layout.tsx"
import { GTProvider } from 'gt-next';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
`GTProvider` è un **componente server**: carica le traduzioni sul server e le passa ai componenti client.
***
## Passaggio 5: Contrassegna il contenuto da tradurre
Ora racchiudi nel componente **``** qualsiasi testo che vuoi tradurre. `` sta per "translate":
```tsx title="app/page.tsx"
import { T } from 'gt-next';
export default function Home() {
return (
Welcome to my app
This content will be translated automatically.
);
}
```
Puoi racchiudere in `` tutto il JSX che vuoi, poco o tanto. Tutto ciò che c'è al suo interno — testo, elementi annidati, persino la formattazione — viene tradotto come un'unica unità.
***
## Passaggio 6: Aggiungi un selettore di lingua
Inserisci un **``** così gli utenti possono cambiare lingua:
```tsx title="app/page.tsx"
import { T, LocaleSelector } from 'gt-next';
export default function Home() {
return (