GitHub

Prerequisiti: Next.js App Router, conoscenze di base di JavaScript

Configurazione rapida: Prova npx gtx-cli@latest per la configurazione automatica. Consulta la guida al Setup Wizard oppure usa la nostra integrazione degli strumenti IA.

Installazione

Installa i pacchetti gt-next e gtx-cli:

npm i gt-next gtx-cli

yarn add gt-next
yarn add --dev gtx-cli

bun add gt-next
bun add --dev gtx-cli

pnpm add gt-next
pnpm add --save-dev gtx-cli

Configurazione

`withGTConfig`

La funzione withGTConfig inizializza l’SDK nella tua applicazione Next.js. Aggiungila al file next.config.[js|ts]:

next.config.ts

import { withGTConfig } from 'gt-next/config';

const nextConfig = {
  // Configurazione Next.js già presente
};

export default withGTConfig(nextConfig, {
  // Opzioni di configurazione aggiuntive di GT
});

`GTProvider`

Il componente GTProvider fornisce il contesto di traduzione ai componenti lato client. Gestisce lo stato della lingua/locale, le traduzioni e abilita gli hook useGT e useTranslations.

Aggiungi GTProvider al layout principale:

app/layout.tsx

import { GTProvider } from 'gt-next';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <GTProvider>
          {children}
        </GTProvider>
      </body>
    </html>
  );
}

Crea un file gt.config.json nella directory principale del progetto:

gt.config.json

{
  "defaultLocale": "en",
  "locales": ["fr", "es", "de"]
}

Personalizza i locali per il tuo progetto. Consulta i locali supportati per le opzioni.

Variabili d'ambiente

Aggiungi al file .env.local per abilitare l'hot reload in sviluppo:

.env.local

GT_API_KEY="your-dev-api-key"
GT_PROJECT_ID="your-project-id"

Solo per lo sviluppo: Non impostare GT_API_KEY in produzione: è solo per l’hot reloading in fase di sviluppo.

Ottieni le chiavi API gratuite su dash.generaltranslation.com oppure esegui:

npx gtx-cli auth

Utilizzo

Ora puoi iniziare a internazionalizzare i contenuti. Esistono due approcci principali:

Contenuto JSX con `<T>`

Avvolgi gli elementi JSX per tradurli usando il componente <T>:

import { T } from 'gt-next';

function Welcome() {
  return (
    <T>
      <h1>Benvenuto nella nostra app!</h1>
    </T>
  );
}

Per i contenuti dinamici, utilizza i componenti variabili come <Var>:

import { T, Var } from 'gt-next';

function Greeting({ user }) {
  return (
    <T>
      <p>Ciao, <Var>{user.name}</Var>!</p>
    </T>
  );
}

Consulta la guida su come usare il componente <T> per ulteriori informazioni.

Stringhe semplici con `useGT`

Per attributi, etichette e testo semplice che utilizzano l'hook useGT:

import { useGT } from 'gt-next';

function ContactForm() {
  const t = useGT();
  
  return (
    <input 
      placeholder={t('Inserisci il tuo indirizzo email')}
      aria-label={t('Campo di inserimento dell’email')}
    />
  );
}

Per i Server Components, usa getGT invece di useGT.

Consulta la guida sulla traduzione delle stringhe per ulteriori informazioni.

Test della tua app

Metti alla prova le traduzioni cambiando lingua:

Aggiungi un menu a discesa per selezionare la locale usando <LocaleSelector>:

import { LocaleSelector } from 'gt-next';

function App() {
  return <LocaleSelector />;
}

Avvia il server di sviluppo:

npm run dev

yarn run dev

bun run dev

pnpm run dev

Apri localhost:3000 e cambia lingua tramite il menu a discesa della locale.

In sviluppo, le traduzioni vengono eseguite on demand (vedrai un breve tempo di caricamento). In produzione, tutto è pretradotto.

Risoluzione dei problemi

Distribuzione

In produzione è necessario pre‑tradurre i contenuti, poiché la traduzione a runtime è disabilitata (fatta eccezione per le funzioni <Tx> e tx).

Ottieni una chiave API di produzione da dash.generaltranslation.com.

Le chiavi di produzione iniziano con gtx-api- (diversamente dalle chiavi di sviluppo, che iniziano con gtx-dev-). Scopri di più sulle differenze tra ambienti.
Aggiungila al tuo ambiente CI/CD:
```
GT_PROJECT_ID=your-project-id
GT_API_KEY=gtx-api-your-production-key
```
Non anteporre mai NEXT_PUBLIC_ alle chiavi di produzione: devono rimanere solo lato server.
Esegui il comando di traduzione per tradurre i contenuti:
```
npx gtx-cli translate
```
Puoi configurare il comportamento del comando di traduzione tramite il file gt.config.json.

Consulta la guida di riferimento alla CLI per ulteriori informazioni.

Aggiorna lo script di build per eseguire la traduzione prima della build:

package.json

{
  "scripts": {
    "build": "npx gtx-cli translate && <...YOUR_BUILD_COMMAND...>"
  }
}

Prossimi passi

Guida al componente <T> - Approfondimento sul componente <T> e sulla traduzione in JSX
Guida alla traduzione delle stringhe - Uso di useGT e getGT
Componenti per variabili - Gestisci contenuti dinamici con <Var>, <Num>, ecc.

Prerequisiti: Next.js App Router, conoscenze di base di JavaScript

Configurazione rapida: Prova npx gtx-cli@latest per la configurazione automatica. Consulta la guida al Setup Wizard oppure usa la nostra integrazione degli strumenti IA.

Installazione

Installa i pacchetti gt-next e gtx-cli:

npm i gt-next gtx-cli

yarn add gt-next
yarn add --dev gtx-cli

bun add gt-next
bun add --dev gtx-cli

pnpm add gt-next
pnpm add --save-dev gtx-cli

Configurazione

`withGTConfig`

La funzione withGTConfig inizializza l’SDK nella tua applicazione Next.js. Aggiungila al file next.config.[js|ts]:

next.config.ts

import { withGTConfig } from 'gt-next/config';

const nextConfig = {
  // Configurazione Next.js già presente
};

export default withGTConfig(nextConfig, {
  // Opzioni di configurazione aggiuntive di GT
});

`GTProvider`

Il componente GTProvider fornisce il contesto di traduzione ai componenti lato client. Gestisce lo stato della lingua/locale, le traduzioni e abilita gli hook useGT e useTranslations.

Aggiungi GTProvider al layout principale:

app/layout.tsx

import { GTProvider } from 'gt-next';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <GTProvider>
          {children}
        </GTProvider>
      </body>
    </html>
  );
}

Crea un file gt.config.json nella directory principale del progetto:

gt.config.json

{
  "defaultLocale": "en",
  "locales": ["fr", "es", "de"]
}

Personalizza i locali per il tuo progetto. Consulta i locali supportati per le opzioni.

Variabili d'ambiente

Aggiungi al file .env.local per abilitare l'hot reload in sviluppo:

.env.local

GT_API_KEY="your-dev-api-key"
GT_PROJECT_ID="your-project-id"

Solo per lo sviluppo: Non impostare GT_API_KEY in produzione: è solo per l’hot reloading in fase di sviluppo.

Ottieni le chiavi API gratuite su dash.generaltranslation.com oppure esegui:

npx gtx-cli auth

Utilizzo

Ora puoi iniziare a internazionalizzare i contenuti. Esistono due approcci principali:

Contenuto JSX con `<T>`

Avvolgi gli elementi JSX per tradurli usando il componente <T>:

import { T } from 'gt-next';

function Welcome() {
  return (
    <T>
      <h1>Benvenuto nella nostra app!</h1>
    </T>
  );
}

Per i contenuti dinamici, utilizza i componenti variabili come <Var>:

import { T, Var } from 'gt-next';

function Greeting({ user }) {
  return (
    <T>
      <p>Ciao, <Var>{user.name}</Var>!</p>
    </T>
  );
}

Consulta la guida su come usare il componente <T> per ulteriori informazioni.

Stringhe semplici con `useGT`

Per attributi, etichette e testo semplice che utilizzano l'hook useGT:

import { useGT } from 'gt-next';

function ContactForm() {
  const t = useGT();
  
  return (
    <input 
      placeholder={t('Inserisci il tuo indirizzo email')}
      aria-label={t('Campo di inserimento dell’email')}
    />
  );
}

Per i Server Components, usa getGT invece di useGT.

Consulta la guida sulla traduzione delle stringhe per ulteriori informazioni.

Test della tua app

Metti alla prova le traduzioni cambiando lingua:

Aggiungi un menu a discesa per selezionare la locale usando <LocaleSelector>:

import { LocaleSelector } from 'gt-next';

function App() {
  return <LocaleSelector />;
}

Avvia il server di sviluppo:

npm run dev

yarn run dev

bun run dev

pnpm run dev

Apri localhost:3000 e cambia lingua tramite il menu a discesa della locale.

In sviluppo, le traduzioni vengono eseguite on demand (vedrai un breve tempo di caricamento). In produzione, tutto è pretradotto.

Risoluzione dei problemi

Distribuzione

In produzione è necessario pre‑tradurre i contenuti, poiché la traduzione a runtime è disabilitata (fatta eccezione per le funzioni <Tx> e tx).

Ottieni una chiave API di produzione da dash.generaltranslation.com.

Le chiavi di produzione iniziano con gtx-api- (diversamente dalle chiavi di sviluppo, che iniziano con gtx-dev-). Scopri di più sulle differenze tra ambienti.
Aggiungila al tuo ambiente CI/CD:
```
GT_PROJECT_ID=your-project-id
GT_API_KEY=gtx-api-your-production-key
```
Non anteporre mai NEXT_PUBLIC_ alle chiavi di produzione: devono rimanere solo lato server.
Esegui il comando di traduzione per tradurre i contenuti:
```
npx gtx-cli translate
```
Puoi configurare il comportamento del comando di traduzione tramite il file gt.config.json.

Consulta la guida di riferimento alla CLI per ulteriori informazioni.

Aggiorna lo script di build per eseguire la traduzione prima della build:

package.json

{
  "scripts": {
    "build": "npx gtx-cli translate && <...YOUR_BUILD_COMMAND...>"
  }
}

Prossimi passi

Guida al componente <T> - Approfondimento sul componente <T> e sulla traduzione in JSX
Guida alla traduzione delle stringhe - Uso di useGT e getGT
Componenti per variabili - Gestisci contenuti dinamici con <Var>, <Num>, ecc.

Prerequisiti: Next.js App Router, conoscenze di base di JavaScript

Configurazione rapida: Prova npx gtx-cli@latest per la configurazione automatica. Consulta la guida al Setup Wizard oppure usa la nostra integrazione degli strumenti IA.

Installazione

Installa i pacchetti gt-next e gtx-cli:

npm i gt-next gtx-cli

yarn add gt-next
yarn add --dev gtx-cli

bun add gt-next
bun add --dev gtx-cli

pnpm add gt-next
pnpm add --save-dev gtx-cli

Configurazione

`withGTConfig`

La funzione withGTConfig inizializza l’SDK nella tua applicazione Next.js. Aggiungila al file next.config.[js|ts]:

next.config.ts

import { withGTConfig } from 'gt-next/config';

const nextConfig = {
  // Configurazione Next.js già presente
};

export default withGTConfig(nextConfig, {
  // Opzioni di configurazione aggiuntive di GT
});

`GTProvider`

Il componente GTProvider fornisce il contesto di traduzione ai componenti lato client. Gestisce lo stato della lingua/locale, le traduzioni e abilita gli hook useGT e useTranslations.

Aggiungi GTProvider al layout principale:

app/layout.tsx

import { GTProvider } from 'gt-next';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <GTProvider>
          {children}
        </GTProvider>
      </body>
    </html>
  );
}

Crea un file gt.config.json nella directory principale del progetto:

gt.config.json

{
  "defaultLocale": "en",
  "locales": ["fr", "es", "de"]
}

Personalizza i locali per il tuo progetto. Consulta i locali supportati per le opzioni.

Variabili d'ambiente

Aggiungi al file .env.local per abilitare l'hot reload in sviluppo:

.env.local

GT_API_KEY="your-dev-api-key"
GT_PROJECT_ID="your-project-id"

Solo per lo sviluppo: Non impostare GT_API_KEY in produzione: è solo per l’hot reloading in fase di sviluppo.

Ottieni le chiavi API gratuite su dash.generaltranslation.com oppure esegui:

npx gtx-cli auth

Utilizzo

Ora puoi iniziare a internazionalizzare i contenuti. Esistono due approcci principali:

Contenuto JSX con `<T>`

Avvolgi gli elementi JSX per tradurli usando il componente <T>:

import { T } from 'gt-next';

function Welcome() {
  return (
    <T>
      <h1>Benvenuto nella nostra app!</h1>
    </T>
  );
}

Per i contenuti dinamici, utilizza i componenti variabili come <Var>:

import { T, Var } from 'gt-next';

function Greeting({ user }) {
  return (
    <T>
      <p>Ciao, <Var>{user.name}</Var>!</p>
    </T>
  );
}

Consulta la guida su come usare il componente <T> per ulteriori informazioni.

Stringhe semplici con `useGT`

Per attributi, etichette e testo semplice che utilizzano l'hook useGT:

import { useGT } from 'gt-next';

function ContactForm() {
  const t = useGT();
  
  return (
    <input 
      placeholder={t('Inserisci il tuo indirizzo email')}
      aria-label={t('Campo di inserimento dell’email')}
    />
  );
}

Per i Server Components, usa getGT invece di useGT.

Consulta la guida sulla traduzione delle stringhe per ulteriori informazioni.

Test della tua app

Metti alla prova le traduzioni cambiando lingua:

Aggiungi un menu a discesa per selezionare la locale usando <LocaleSelector>:

import { LocaleSelector } from 'gt-next';

function App() {
  return <LocaleSelector />;
}

Avvia il server di sviluppo:

npm run dev

yarn run dev

bun run dev

pnpm run dev

Apri localhost:3000 e cambia lingua tramite il menu a discesa della locale.

In sviluppo, le traduzioni vengono eseguite on demand (vedrai un breve tempo di caricamento). In produzione, tutto è pretradotto.

Risoluzione dei problemi

Distribuzione

In produzione è necessario pre‑tradurre i contenuti, poiché la traduzione a runtime è disabilitata (fatta eccezione per le funzioni <Tx> e tx).

Ottieni una chiave API di produzione da dash.generaltranslation.com.

Le chiavi di produzione iniziano con gtx-api- (diversamente dalle chiavi di sviluppo, che iniziano con gtx-dev-). Scopri di più sulle differenze tra ambienti.
Aggiungila al tuo ambiente CI/CD:
```
GT_PROJECT_ID=your-project-id
GT_API_KEY=gtx-api-your-production-key
```
Non anteporre mai NEXT_PUBLIC_ alle chiavi di produzione: devono rimanere solo lato server.
Esegui il comando di traduzione per tradurre i contenuti:
```
npx gtx-cli translate
```
Puoi configurare il comportamento del comando di traduzione tramite il file gt.config.json.

Consulta la guida di riferimento alla CLI per ulteriori informazioni.

Aggiorna lo script di build per eseguire la traduzione prima della build:

package.json

{
  "scripts": {
    "build": "npx gtx-cli translate && <...YOUR_BUILD_COMMAND...>"
  }
}

Prossimi passi

Guida al componente <T> - Approfondimento sul componente <T> e sulla traduzione in JSX
Guida alla traduzione delle stringhe - Uso di useGT e getGT
Componenti per variabili - Gestisci contenuti dinamici con <Var>, <Num>, ecc.

Guida rapida a Next.js

E se non volessi usare la piattaforma General Translation?

La lingua della mia app non cambia, anche se ho modificato la lingua del browser.

Perché le lingue impiegano molto a caricarsi in dev?

Perché alcune traduzioni sono imprecise?

E se non stessi usando la piattaforma General Translation?

In questa pagina

Guida rapida a Next.js

E se non volessi usare la piattaforma General Translation?

La lingua della mia app non cambia, anche se ho modificato la lingua del browser.

Perché le lingue impiegano molto a caricarsi in dev?

Perché alcune traduzioni sono imprecise?

E se non stessi usando la piattaforma General Translation?

In questa pagina

Guida rapida a Next.js

E se non volessi usare la piattaforma General Translation?

La lingua della mia app non cambia, anche se ho modificato la lingua del browser.

Perché le lingue impiegano molto a caricarsi in dev?

Perché alcune traduzioni sono imprecise?

E se non stessi usando la piattaforma General Translation?

In questa pagina

GitHubMetti una stella su GitHub

GitHubMetti una stella su GitHub

Metti una stella su GitHub

Metti una stella su GitHub