# General Translation React SDKs (gt-react, gt-next, gt-react-native): Next.js App Router Quickstart
URL: https://generaltranslation.com/it/docs/react/nextjs-quickstart.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Aggiungi più lingue a un'app Next.js App Router con General Translation in meno di 10 minuti.
Alla fine 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 **App Router** (Next.js 13.0.0 o versioni successive, esclusi 15.2.1 e 15.2.2)
* Node.js 18+
**Suggerimento:** Esegui `npx gt@latest` per configurare tutto con il [Setup Wizard](/docs/cli/quickstart). Questa guida illustra la configurazione manuale.
**Nota:** Se usi Pages Router, segui invece il [Quickstart di Next.js Pages Router](/docs/react/nextjs-pages-router-quickstart).
## Quickstart [#quickstart]
### 1. Installa i pacchetti
`gt-next` è la libreria che gestisce le traduzioni nella tua app. `gt` è lo strumento CLI che prepara le traduzioni per la 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
```
### 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 con esso la configurazione di Next.js esistente. In questo frammento e in quelli seguenti, le righe verdi vengono aggiunte e le righe rosse vengono rimosse; mantieni tutte le opzioni già presenti nella tua configurazione:
```ts title="next.config.ts"
import { withGTConfig } from 'gt-next/config'; // [!code ++]
const nextConfig = {};
export default nextConfig; // [!code --]
export default withGTConfig(nextConfig); // [!code ++]
```
Questo plugin legge le impostazioni di traduzione e configura tutto automaticamente dietro le quinte. Non sono necessarie altre modifiche alla configurazione di Next.js.
### 3. Crea un file di configurazione per la traduzione
Crea un file **`gt.config.json`** nella radice del progetto. In questo modo, la libreria saprà quali lingue supporti:
```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 sorgente).
* **`locales`** — le lingue in cui vuoi tradurre. Scegline una dall'[elenco delle impostazioni regionali supportate](/docs/platform/dashboard/reference/supported-locales).
* **`files.gt.output`** — dove la CLI salva i file di traduzione. `[locale]` viene sostituito con il codice di ciascuna 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/
```
### 4. Aggiungi una load function per le traduzioni locali
Crea un file **[`loadTranslations`](/docs/react/reference/functions/load-translations)** nella directory `src/` (o nella radice del progetto). Questo indica a `gt-next` come caricare i file di traduzione generati dalla CLI:
```ts title="src/loadTranslations.ts"
export default async function loadTranslations(locale: string) {
const translations = await import(`../public/_gt/${locale}.json`);
return translations.default;
}
```
**Avviso:** Questi file di traduzione non esistono finché non li crei, quindi al primo `npm run dev` la compilazione fallisce e la pagina restituisce un HTTP 500. Esegui [`npx gt generate`](/docs/cli/reference/commands/generate) (non serve una chiave API) oppure [`npx gt translate`](/docs/cli/reference/commands/translate) (con credenziali), oppure aggiungi file vuoti `{}` in `public/_gt/[locale].json`.
`withGTConfig` rileva automaticamente un file `loadTranslations.[js|ts]` nella directory `src/` o nella radice del progetto — non serve alcuna configurazione aggiuntiva.
**Nota:** Le traduzioni locali sono incluse nel bundle della tua app, quindi vengono caricate istantaneamente senza dipendere da servizi esterni. Per maggiori dettagli e per i relativi compromessi, vedi [Archiviazione delle traduzioni](/docs/react/guides/storing-translations).
### 5. Aggiungi GTProvider al layout
Il componente **[`GTProvider`](/docs/react/reference/components/gt-provider)** consente all'intera app di accedere alle traduzioni. Deve racchiudere l'app a livello del layout radice. Mantieni invariato il resto del layout esistente (font, metadati, stili):
```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. Contrassegna il contenuto da tradurre
Ora racchiudi nel componente **[``](/docs/react/reference/components/t)** qualsiasi testo che vuoi tradurre. [``](/docs/react/reference/components/t) sta per "translate":
```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 ++] */}
);
}
```
Puoi racchiudere in [``](/docs/react/reference/components/t) tanto o poco JSX quanto vuoi. Tutto ciò che c'è al suo interno — testo, elementi annidati, perfino la formattazione — viene tradotto come un'unica unità.
### 7. Aggiungi un selettore di lingua
Inserisci un **[``](/docs/react/reference/components/locale-selector)** per consentire agli utenti di cambiare lingua:
```tsx title="app/page.tsx"
import { T } from 'gt-next'; // [!code --]
import { T, LocaleSelector } from 'gt-next'; // [!code ++]
export default function Home() {
return (
{/* [!code ++] */}