# 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
---
title: Next.js App Router Quickstart
description: Aggiungi più lingue a un'app Next.js App Router con General Translation in meno di 10 minuti.
related:
links:
- /docs/react/guides/translating-jsx
- /docs/react/guides/translating-strings
- /docs/react/guides/managing-locales
- /docs/react/guides/formatting-variables
---
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+)
* 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 ++] */}