GitHub

Panoramica

In questa guida vedremo due cose:

Creare una nuova app Next.js
Internazionalizzarla con General Translation

In totale, il tutto richiederà meno di 10 minuti.

Prerequisiti

Supponiamo che tu abbia esperienza con React, in qualche modo, e dimestichezza con TypeScript.

Passaggio 1: Crea una nuova app Next.js

Per prima cosa, apri il terminale, vai nella directory che preferisci ed esegui il seguente comando:

npx create-next-app next-quickstart --ts --tailwind --eslint --app --use-npm --src-dir

Verrà visualizzata una procedura guidata di configurazione: puoi semplicemente selezionare il valore predefinito per ciascuna opzione.

Passaggio 2: installa le librerie

Vai alla directory radice del tuo progetto Next.js ed esegui:

cd next-quickstart
npm i gt-next
npm i gtx-cli

Passaggio 3: Aggiungi le variabili d'ambiente.

Vai alla Dashboard. Apri la pagina Dev API Keys nella barra di navigazione e crea una nuova API key e un Project ID. Quindi aggiungili al file .env.

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 tuo codebase alla traduzione.

npx gtx-cli setup

Passaggio 5: Modifica il layout radice

Modifica la prop lang nel tag <html> nel file src/app/layout.tsx.

Deve usare await getLocale() per ottenere la lingua/locale corrente.

src/app/layout.tsx

import { GTProvider, getLocale } from "gt-next"; 
...
export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const locale = await getLocale(); 
  return (
    <html lang={locale}> // [!code highlight]
      <GTProvider>
        <body
          className={`${geistSans.variable} ${geistMono.variable} antialiased`}
        >
        {children}
        </body>
      </GTProvider>
    </html>
  );
}

Passaggio 6: Avvia la tua app

La tua app è pronta per l’internazionalizzazione! 🎉 Mettiamola alla prova!

Modifica le impostazioni della lingua del browser.

Cambia la lingua in Chrome
Cambia la lingua in Firefox
Cambia la lingua in Edge

Avvia la tua app Next.js.

npm run dev

Apri l’app nel browser che preferisci (di solito su http://localhost:3000). Se hai configurato tutto correttamente, dovresti vedere l’app nella lingua impostata nel browser.

Risoluzione dei problemi

Note

Traduci JSX arbitrario con il componente <T>.
Se la traduzione non funziona quando cambi lingua, controlla i cookie del browser.

Prossimi passaggi

Metti una stella al nostro repo GitHub gt-next.
Configura il supporto per le lingue da destra verso sinistra.

Panoramica

In questa guida vedremo due cose:

Creare una nuova app Next.js
Internazionalizzarla con General Translation

In totale, il tutto richiederà meno di 10 minuti.

Prerequisiti

Supponiamo che tu abbia esperienza con React, in qualche modo, e dimestichezza con TypeScript.

Passaggio 1: Crea una nuova app Next.js

Per prima cosa, apri il terminale, vai nella directory che preferisci ed esegui il seguente comando:

npx create-next-app next-quickstart --ts --tailwind --eslint --app --use-npm --src-dir

Verrà visualizzata una procedura guidata di configurazione: puoi semplicemente selezionare il valore predefinito per ciascuna opzione.

Passaggio 2: installa le librerie

Vai alla directory radice del tuo progetto Next.js ed esegui:

cd next-quickstart
npm i gt-next
npm i gtx-cli

Passaggio 3: Aggiungi le variabili d'ambiente.

Vai alla Dashboard. Apri la pagina Dev API Keys nella barra di navigazione e crea una nuova API key e un Project ID. Quindi aggiungili al file .env.

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 tuo codebase alla traduzione.

npx gtx-cli setup

Passaggio 5: Modifica il layout radice

Modifica la prop lang nel tag <html> nel file src/app/layout.tsx.

Deve usare await getLocale() per ottenere la lingua/locale corrente.

src/app/layout.tsx

import { GTProvider, getLocale } from "gt-next"; 
...
export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const locale = await getLocale(); 
  return (
    <html lang={locale}> // [!code highlight]
      <GTProvider>
        <body
          className={`${geistSans.variable} ${geistMono.variable} antialiased`}
        >
        {children}
        </body>
      </GTProvider>
    </html>
  );
}

Passaggio 6: Avvia la tua app

La tua app è pronta per l’internazionalizzazione! 🎉 Mettiamola alla prova!

Modifica le impostazioni della lingua del browser.

Cambia la lingua in Chrome
Cambia la lingua in Firefox
Cambia la lingua in Edge

Avvia la tua app Next.js.

npm run dev

Apri l’app nel browser che preferisci (di solito su http://localhost:3000). Se hai configurato tutto correttamente, dovresti vedere l’app nella lingua impostata nel browser.

Risoluzione dei problemi

Note

Traduci JSX arbitrario con il componente <T>.
Se la traduzione non funziona quando cambi lingua, controlla i cookie del browser.

Prossimi passaggi

Metti una stella al nostro repo GitHub gt-next.
Configura il supporto per le lingue da destra verso sinistra.

Panoramica

In questa guida vedremo due cose:

Creare una nuova app Next.js
Internazionalizzarla con General Translation

In totale, il tutto richiederà meno di 10 minuti.

Prerequisiti

Supponiamo che tu abbia esperienza con React, in qualche modo, e dimestichezza con TypeScript.

Passaggio 1: Crea una nuova app Next.js

Per prima cosa, apri il terminale, vai nella directory che preferisci ed esegui il seguente comando:

npx create-next-app next-quickstart --ts --tailwind --eslint --app --use-npm --src-dir

Verrà visualizzata una procedura guidata di configurazione: puoi semplicemente selezionare il valore predefinito per ciascuna opzione.

Passaggio 2: installa le librerie

Vai alla directory radice del tuo progetto Next.js ed esegui:

cd next-quickstart
npm i gt-next
npm i gtx-cli

Passaggio 3: Aggiungi le variabili d'ambiente.

Vai alla Dashboard. Apri la pagina Dev API Keys nella barra di navigazione e crea una nuova API key e un Project ID. Quindi aggiungili al file .env.

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 tuo codebase alla traduzione.

npx gtx-cli setup

Passaggio 5: Modifica il layout radice

Modifica la prop lang nel tag <html> nel file src/app/layout.tsx.

Deve usare await getLocale() per ottenere la lingua/locale corrente.

src/app/layout.tsx

import { GTProvider, getLocale } from "gt-next"; 
...
export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const locale = await getLocale(); 
  return (
    <html lang={locale}> // [!code highlight]
      <GTProvider>
        <body
          className={`${geistSans.variable} ${geistMono.variable} antialiased`}
        >
        {children}
        </body>
      </GTProvider>
    </html>
  );
}

Passaggio 6: Avvia la tua app

La tua app è pronta per l’internazionalizzazione! 🎉 Mettiamola alla prova!

Modifica le impostazioni della lingua del browser.

Cambia la lingua in Chrome
Cambia la lingua in Firefox
Cambia la lingua in Edge

Avvia la tua app Next.js.

npm run dev

Apri l’app nel browser che preferisci (di solito su http://localhost:3000). Se hai configurato tutto correttamente, dovresti vedere l’app nella lingua impostata nel browser.

Risoluzione dei problemi

Note

Traduci JSX arbitrario con il componente <T>.
Se la traduzione non funziona quando cambi lingua, controlla i cookie del browser.

Prossimi passaggi

Metti una stella al nostro repo GitHub gt-next.
Configura il supporto per le lingue da destra verso sinistra.

Speedrun Next.js

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

In questa pagina

Speedrun Next.js

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

In questa pagina

Speedrun Next.js

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

In questa pagina

GitHubMetti una stella su GitHub

GitHubMetti una stella su GitHub

Metti una stella su GitHub

Metti una stella su GitHub