# gt-next: General Translation Next.js SDK: Panoramica
URL: https://generaltranslation.com/it/docs/next/introduction.mdx
---
title: Panoramica
description: Panoramica dell'SDK Next.js di General Translation
---
## Introduzione
L’SDK Next.js di General Translation è una libreria open source di internazionalizzazione (i18n) per applicazioni Next.js.
Fornisce un set completo di strumenti per internazionalizzare la tua applicazione Next.js in modo semplice e facile da mantenere, con una parità di funzionalità rispetto ad altre popolari librerie i18n. Basato sull'[SDK React](/docs/react), offre inoltre funzionalità aggiuntive specifiche per Next.js.
L’SDK può essere utilizzato in modo autonomo senza la piattaforma General Translation e si comporta in modo simile ad altre librerie i18n.
Tuttavia, si integra anche con la nostra piattaforma per offrire funzionalità avanzate:
* Hot reloading delle traduzioni in fase di sviluppo
* Traduzioni automatiche con IA
* Sincronizzazione delle traduzioni con la piattaforma General Translation
* Integrazione nativa con la nostra CDN di traduzione
* Traduzione on-demand dei componenti React in produzione (lato server)
## Concetti
Ci sono 6 concetti principali da capire sull'SDK.
Inizializzazione con [`withGTConfig`](/docs/next/api/config/with-gt-config)
Il componente [``](/docs/next/api/components/gtprovider)
Il componente [``](/docs/next/api/components/t)
L'hook [`useGT`](/docs/next/api/strings/use-gt)
La funzione [`msg`](/docs/next/api/strings/msg) per le stringhe condivise
(Facoltativo) L'hook [`useTranslations`](/docs/next/api/dictionary/use-translations)
## Inizializzazione con `withGTConfig`
La funzione [`withGTConfig`](/docs/next/api/config/with-gt-config) inizializza l’SDK nella tua applicazione Next.js.
Aggiungila al file `next.config.[js|ts]` per configurare l’SDK:
```tsx title="next.config.ts"
import { withGTConfig } from 'gt-next/config';
const nextConfig = {
// Le tue opzioni next.config.ts
};
export default withGTConfig(nextConfig, {
// La tua configurazione GT
});
```
Per ulteriori informazioni, consulta il [riferimento API di withGTConfig](/docs/next/api/config/with-gt-config).
## Il componente ``
Il componente [``](/docs/next/api/components/gtprovider) fornisce al tuo applicativo il contesto di traduzione, inclusi la lingua corrente e le traduzioni pertinenti.
```tsx
import { GTProvider } from 'gt-next';
export default function RootLayout({ children }) {
return (
{children}
);
}
```
**Importante:** il provider deve avvolgere l’intera applicazione ed essere posizionato il più in alto possibile nell’albero dei componenti, ad esempio nel layout radice.
Il provider è necessario solo per le funzionalità del lato client. Le applicazioni esclusivamente lato server non lo richiedono, ma può comunque essere incluso.
Per maggiori informazioni, consulta il riferimento API di [`GTProvider`](/docs/next/api/components/gtprovider).
## Il componente ``
Il componente [``](/docs/next/api/components/t) è il modo consigliato per tradurre i contenuti della tua applicazione.
È un componente React che può essere usato per racchiudere qualsiasi elemento JSX e ne esegue automaticamente il rendering in una lingua supportata.
Ti consigliamo di usare il componente [``](/docs/next/api/components/t) ove possibile, poiché offre la massima flessibilità nelle traduzioni.
A differenza delle stringhe, il componente [``](/docs/next/api/components/t) può essere usato per tradurre contenuti HTML, risultando molto più potente delle traduzioni di stringhe.
### Esempi
```tsx
Hello, world!
```
```tsx
Here is an image
```
```tsx
Formatting can be done easily with the `` component.
{1000}{new Date()}{1000}
```
Il componente [``](/docs/next/api/components/t) funziona con [componenti variabili](/docs/next/guides/variables) come [``](/docs/next/api/components/num), [``](/docs/next/api/components/datetime) e [``](/docs/next/api/components/currency) per la formattazione dinamica dei contenuti.
Consulta la [guida al componente [``]](/docs/next/guides/t) per scoprire i diversi modi di usare il componente [``](/docs/next/api/components/t).
## L'hook `useGT`
L'hook [`useGT`](/docs/next/api/strings/use-gt) è un hook di React che può essere usato in modo simile al componente [``](/docs/next/api/components/t), con alcuni compromessi.
L'hook restituisce una funzione utilizzabile per tradurre le stringhe.
```tsx
const gt = useGT();
gt('Hello, world!');
```
Rispetto al componente [``](/docs/next/api/components/t), l'hook [`useGT`](/docs/next/api/strings/use-gt) offre maggiore flessibilità nella base di codice.
Ad esempio, se hai una struttura dati complessa con stringhe annidate, usare un componente [``](/docs/next/api/components/t) sarebbe più difficile.
```tsx
const gt = useGT();
const data = {
title: gt('Hello, world!'),
description: gt('This is a description'),
};
```
Consulta la guida sulle [stringhe](/docs/next/guides/strings) per saperne di più sull'hook [`useGT`](/docs/next/api/strings/use-gt).
## La funzione `msg`
La funzione [`msg`](/docs/next/api/strings/msg) viene usata per contrassegnare le stringhe da tradurre utilizzate in più componenti o archiviate in oggetti di configurazione.
Questo è particolarmente utile per contenuti condivisi come etichette di navigazione, messaggi dei moduli o qualsiasi testo che compare in più punti dell'applicazione.
```tsx
// Contrassegna le stringhe per la traduzione
import { msg } from 'gt-next';
const navItems = [
{ label: msg('Home'), href: '/' },
{ label: msg('About'), href: '/about' },
{ label: msg('Contact'), href: '/contact' }
];
```
```tsx
// Decodifica e utilizza le stringhe contrassegnate
import { useMessages } from 'gt-next';
function Navigation() {
const m = useMessages();
return (
);
}
```
La funzione [`msg`](/docs/next/api/strings/msg) codifica le stringhe con metadati di traduzione e [`useMessages`](/docs/next/api/strings/use-messages) (oppure [`getMessages`](/docs/next/api/strings/get-messages) per i componenti server) le decodifica.
Usa [`msg`](/docs/next/api/strings/msg) per i contenuti condivisi che devono essere tradotti in modo coerente in tutta l'applicazione. Per i contenuti specifici di un componente, è preferibile usare [``](/docs/next/api/components/t) o [`useGT`](/docs/next/api/strings/use-gt).
Per saperne di più sulla funzione `msg`, consulta la guida alle [stringhe condivise](/docs/next/guides/shared-strings).
## L'hook `useTranslations`
L'hook [`useTranslations`](/docs/next/api/dictionary/use-translations) è un hook di React che restituisce una funzione utilizzabile per recuperare le traduzioni associate a una determinata chiave.
```tsx title="dictionary.ts"
const dictionary = {
hello: {
world: 'Hello, world!',
},
};
```
```tsx title="App.tsx"
const translate = useTranslations();
translate('hello.world');
```
Questo comportamento è simile a quello di altre librerie di traduzione, come [`react-i18next`](https://react.i18next.com/) e [`next-intl`](https://next-intl-docs.vercel.app/).
Non consigliamo di usare l'hook [`useTranslations`](/docs/next/api/dictionary/use-translations) nella tua applicazione. Un uso frequente dell'hook [`useTranslations`](/docs/next/api/dictionary/use-translations) renderà la tua base di codice più difficile da mantenere
e porterà a un significativo debito tecnico.
Ti consigliamo invece di usare il componente [``](/docs/next/api/components/t) o l'hook [`useGT`](/docs/next/api/strings/use-gt).
Se stai migrando da un'altra libreria i18n, l'hook [`useTranslations`](/docs/next/api/dictionary/use-translations) può fungere da sostituto diretto ed essere utile per migrare gradualmente la tua base di codice.
Consulta la guida sui [dizionari](/docs/next/guides/dictionaries) per saperne di più sull'hook [`useTranslations`](/docs/next/api/dictionary/use-translations).
Consulta il [riferimento API di useTranslations](/docs/next/api/dictionary/use-translations) per maggiori informazioni.
***
## Passaggi successivi
**Guardalo in azione:** Sfoglia le [app di esempio funzionanti](/docs/next/tutorials/examples) che mostrano ogni pattern, oppure esplora il [catalogo completo delle app](https://app-catalog.generaltranslation.dev).
* Scopri come configurare il tuo progetto Next.js con l’SDK: [Quickstart](/docs/next)
* Scopri come tradurre contenuti JSX con il componente [``](/docs/next/api/components/t): [Guida alla traduzione di JSX](/docs/next/guides/t)
* Scopri come tradurre le stringhe con l’hook [`useGT`](/docs/next/api/strings/use-gt): [Guida alla traduzione delle stringhe](/docs/next/guides/strings)
* Scopri come usare le stringhe condivise con la funzione [`msg`](/docs/next/api/strings/msg): [Guida alle stringhe condivise](/docs/next/guides/shared-strings)
