# General Translation React SDKs (gt-react, gt-next, gt-react-native): Componenti server URL: https://generaltranslation.com/it/docs/react/nextjs/server-components.mdx Docs index: https://generaltranslation.com/llms.txt Description: Traduci i contenuti nei React Server Components con General Translation e scopri come si comporta gt-next nei componenti server rispetto a quelli client. Nel Next.js App Router, `gt-next` funziona sia nei React Server Components (RSC) sia nei componenti client. Lo stesso componente [``](/docs/react/reference/components/t) e gli hook di traduzione vengono importati da `gt-next` in entrambi i casi e la libreria seleziona l'implementazione corretta in base all'ambiente. Le funzioni asincrone dell'App Router si trovano nell'entry point `gt-next/server`, che non funziona con il Pages Router. Leggi questa pagina per capire dove viene eseguita la traduzione e quali import sono disponibili in ciascun tipo di componente. Per le singole pagine dell'API server, inizia da [`getGT`](/docs/react/nextjs/reference/functions/get-gt). ## Import lato server e client [#imports] Il punto di ingresso principale `gt-next` si risolve in un'implementazione diversa a seconda di dove lo importi: * In un **componente server sincrono**, [``](/docs/react/reference/components/t) e [``](/docs/react/reference/components/gt-provider) sono implementazioni server che caricano le traduzioni sul server. Hook come [`useGT`](/docs/react/reference/hooks/use-gt), [`useTranslations`](/docs/react/reference/hooks/use-translations), [`useMessages`](/docs/react/reference/hooks/use-messages) e [`useLocale`](/docs/react/reference/hooks/use-locale) funzionano senza richiedere una boundary `'use client'`. * In un **componente server asincrono**, usa la funzione asincrona corrispondente da [`gt-next/server`](/docs/react/nextjs/reference/functions/get-gt), ad esempio [`getGT`](/docs/react/nextjs/reference/functions/get-gt), [`getTranslations`](/docs/react/nextjs/reference/functions/get-translations), [`getMessages`](/docs/react/nextjs/reference/functions/get-messages) o [`getLocale`](/docs/react/nextjs/reference/functions/get-locale). * In un **componente client** (un file con `'use client'`), gli stessi import si risolvono nelle implementazioni condivise di `gt-react`. Poiché il percorso di importazione è identico, raramente devi preoccuparti di quale implementazione ottieni. Racchiudi il JSX in [``](/docs/react/reference/components/t) e verrà tradotto in-place, indipendentemente dal fatto che il componente venga renderizzato sul server o sul client. ```tsx title="app/page.tsx" import { T } from 'gt-next'; export default function Page() { return (

Welcome

This content is translated automatically.

); } ``` *Nota: le funzioni solo lato server, come [`getGT`](/docs/react/nextjs/reference/functions/get-gt), [`getLocale`](/docs/react/nextjs/reference/functions/get-locale) e [`tx`](/docs/react/nextjs/reference/functions/tx), non possono essere importate in un componente client. Se le importi da un file `'use client'`, viene generato un errore.* ## Il provider in Next.js [#provider] Nell'App Router di Next.js, [``](/docs/react/reference/components/gt-provider) è un componente server. Inseriscilo nel layout radice e caricherà le traduzioni sul server, per poi passarle ai tuoi componenti client. **Non** passare le props `locale` o `translations`: il server le ricava dalla richiesta. ```tsx title="app/layout.tsx" import { GTProvider, useLocale } from 'gt-next'; export default function RootLayout({ children, }: { children: React.ReactNode; }) { const locale = useLocale(); return ( {children} ); } ``` Il Next.js Pages Router funziona in modo diverso: passa `locale` e `translations` a [``](/docs/react/reference/components/gt-provider) tramite le props della pagina. Consulta il [Next.js Pages Router Quickstart](/docs/react/nextjs-pages-router-quickstart). ## Traduzione delle stringhe [#strings] Per le stringhe isolate — segnaposto, valori `aria-label`, testo nell'attributo `alt` — ti serve una funzione di traduzione anziché il componente [``](/docs/react/reference/components/t): * **In un componente sincrono**, usa l'hook [`useGT`](/docs/react/reference/hooks/use-gt) di `gt-next`. Funziona sia nei componenti server sia in quelli client. * **In un componente App Router asincrono**, usa `await getGT` da [`gt-next/server`](/docs/react/nextjs/reference/functions/get-gt). ```tsx title="app/page.tsx" import { getGT } from 'gt-next/server'; export default async function Page() { const gt = await getGT(); return

{gt('Hello, world!')}

; } ``` [`getGT`](/docs/react/nextjs/reference/functions/get-gt) e [`useGT`](/docs/react/reference/hooks/use-gt) traducono contenuti noti in fase di build. Per i contenuti noti solo al momento della richiesta, usa invece la traduzione runtime. ## Traduzione runtime [#runtime] I componenti server possono anche tradurre on demand al momento della richiesta con il [componente ``](/docs/react/nextjs/reference/components/tx) e la [funzione `tx`](/docs/react/nextjs/reference/functions/tx) di `gt-next/server`. Usali solo quando il contenuto non è noto in anticipo: traducono tramite l'API di General Translation sul server durante l'elaborazione della richiesta, quindi sono più lenti della traduzione build-time. La traduzione runtime è disponibile solo lato server; non è disponibile nei componenti client. ## Come funziona la traduzione [#how-it-runs] `gt-next` si comporta in modo diverso in produzione e in sviluppo, in base a `NODE_ENV`: * **Produzione.** Le traduzioni build-time vengono caricate per impostazione predefinita dalla CDN di General Translation, oppure dal bundle locale se configuri le [traduzioni locali](/docs/react/nextjs/config#translations). La traduzione su richiesta con [``](/docs/react/nextjs/reference/components/tx) e [`tx`](/docs/react/nextjs/reference/functions/tx) continua a funzionare nei componenti server. * **Sviluppo.** Con una chiave API di sviluppo, il contenuto renderizzato in un'impostazione regionale diversa da quella predefinita viene tradotto su richiesta tramite l'API di General Translation e memorizzato nella cache in memoria, così puoi visualizzare in anteprima le impostazioni regionali mentre modifichi il contenuto. In produzione questo ritardo non esiste. *Nota: una chiave API di produzione (con prefisso `gtx-api-`) fa sì che `gt-next` si comporti come in produzione anche durante lo sviluppo locale, disabilitando l'hot reload delle traduzioni su richiesta.* ## Sitemap See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.