Skip to content
Italiano
Torna alla directory

nextjs.org

200 OK

Next.js porta routing, rendering e funzionalità server in React

Developer ToolsGoogle AnalyticsNext.jsReact
Risposta diretta

Next.js è un framework React per creare applicazioni web full-stack con routing, funzionalità lato server, molteplici strategie di rendering e interattività mirata nel browser. Può servire contenuti statici e applicazioni basate sulle richieste, ma l'architettura corretta dipende dai dati, dalla memorizzazione nella cache, dal runtime e dai requisiti lato client di ciascuna route.

Ultimo controllo:

Concetti principali

  • Framework React full-stack: Next.js aggiunge routing applicativo, rendering, funzionalità server, convenzioni per la cache, compilazione e bundling attorno ai componenti React.

  • App Router orientato innanzitutto al server: Per impostazione predefinita, layout e pagine dell'App Router sono Server Components, mentre i Client Components forniscono stato nel browser, eventi, effetti e API disponibili soltanto nel browser.

  • Distribuzione specifica per route: Le route possono essere prerenderizzate, renderizzate dinamicamente, memorizzate nella cache o riconvalidate in base ai loro input e requisiti di aggiornamento.

  • Esportazione statica con limitazioni: I progetti senza requisiti disponibili soltanto sul server possono essere esportati come file statici, mentre le funzionalità dipendenti dal runtime richiedono un supporto server compatibile.

  • Endpoint appartenenti all'applicazione: I Route Handlers dell'App Router possono elaborare richieste HTTP accanto all'applicazione, sebbene continuino ad applicarsi le normali responsabilità operative e di sicurezza delle API.

  • Due router supportati: Sia il più recente App Router sia il consolidato Pages Router sono documentati, ma i rispettivi modelli di componenti, dati e routing non dovrebbero essere considerati intercambiabili.

  • Compromessi misurati: I team dovrebbero verificare il JavaScript client, la cache, la compatibilità della distribuzione, l'aggiornamento e le operazioni di runtime su route rappresentative, anziché presumere i risultati.

Compare the subject with other published sites in the same category.

All alternatives

Next.js porta routing, rendering e funzionalità server in React

Next.js è un framework React per creare applicazioni web full-stack. React fornisce il modello a componenti per le interfacce utente; Next.js aggiunge routing, rendering, convenzioni per l'accesso ai dati, funzionalità server, compilazione, bundling, memorizzazione nella cache e strumenti orientati alla produzione.

L'argomento principale è il framework, non il suo dominio. nextjs.org è il sito ufficiale nel quale i visitatori possono trovare documentazione aggiornata, guide, collegamenti alla community e informazioni sul progetto.

Next.js è particolarmente rilevante quando un team vuole sviluppare con React offrendo più di un'interfaccia eseguita soltanto nel browser. Un singolo progetto può contenere pagine prerenderizzate, risposte generate al momento della richiesta, accesso ai dati lato server, endpoint in stile API e componenti interattivi eseguiti nel browser.

Cosa aggiunge Next.js a React

React aiuta gli sviluppatori a descrivere le interfacce come componenti, ma non prescrive un'architettura applicativa completa. Next.js fornisce convenzioni per associare i file alle route, decidere dove viene eseguito il codice, caricare i dati, produrre risposte e preparare un'applicazione per la distribuzione.

Il suo valore è quindi più ampio del rendering lato server. Un'applicazione Next.js può utilizzare vari metodi di rendering e distribuzione, talvolta all'interno dello stesso progetto. Il framework coordina questi metodi attorno a React anziché imporre a ogni route un unico modello.

Una sintesi utile di questa suddivisione è:

  • React definisce componenti, stato, props e composizione dell'interfaccia.
  • Next.js definisce route, layout, scelte di rendering, punti di ingresso server e comportamento della build.
  • L'applicazione definisce le proprie regole sui dati, i confini client, la politica della cache e i requisiti di distribuzione.
  • L'ambiente di hosting determina quali funzionalità di runtime sono disponibili e come operano.

Questa distinzione è importante quando si confronta Next.js con un'applicazione React lato client, un generatore di siti statici o un altro framework web. Il framework offre un'ampia gamma di funzionalità, ma un progetto trae vantaggio soltanto da quelle che utilizza bene.

Componenti server e client

Nell'App Router, per impostazione predefinita layout e pagine sono Server Components. I Server Components vengono eseguiti in un ambiente server e possono svolgere operazioni sui dati lato server senza inviare al browser l'implementazione del componente.

I Client Components vengono utilizzati quando una parte dell'interfaccia richiede stato nel browser, gestori di eventi, effetti o API disponibili soltanto nel browser. Gli sviluppatori definiscono un confine client con la direttiva use client e i componenti sottostanti a quel confine entrano a far parte del grafo dei moduli lato client.

Domanda Server Component Client Component
Dove viene eseguita la logica del componente? Nell'ambiente di rendering server Nel browser dopo essere stata inclusa nel bundle client
Può utilizzare lo stato del browser o gestori dei clic? No
Può utilizzare direttamente API disponibili soltanto nel browser? No
Il codice del componente viene inviato al browser? Non come codice di un componente client
Ruolo tipico Contenuti basati sui dati, layout e composizione lato server Moduli, menu, editor, filtri e altri controlli interattivi

Una route non deve scegliere esclusivamente un solo tipo. Un Server Component può eseguire il rendering dei contenuti e comporre Client Components selezionati per le parti interattive della pagina. Questo consente ai team di collocare JavaScript per il browser attorno a esigenze specifiche, anziché trattare l'intera route come un'applicazione client.

Il confine richiede comunque attenzione. Spostare un grande sottoalbero di componenti dietro use client può inviare più JavaScript al browser, mentre suddividere ogni piccolo controllo in un confine separato può rendere più difficile comprendere il codice. Le pagine rappresentative dovrebbero essere misurate anziché giudicate soltanto in base all'etichetta del framework.

I Server Components sono inoltre distinti dalla strategia di distribuzione di una route. Un Server Component può contribuire a un output prerenderizzato o partecipare al rendering dinamico. Definire un componente come lato server non indica, di per sé, se la route venga generata durante una build, aggiornata in seguito o prodotta per ogni richiesta.

App Router e Pages Router

Next.js documenta attualmente due sistemi di routing. L'App Router è il sistema più recente e integra funzionalità di React come i Server Components. Il Pages Router è il sistema precedente e continua a essere supportato.

Area App Router Pages Router
Struttura principale delle route La directory app La directory pages
Modello di componente predefinito Layout e pagine sono Server Components Utilizza il precedente modello di pagina di Next.js
Interfaccia condivisa I layout annidati sono una convenzione centrale Comunemente composta attraverso pattern dell'applicazione e delle pagine
Punto di partenza ideale Nuovi progetti che adottano l'architettura attuale Applicazioni esistenti o dipendenze costruite attorno alle API del Pages Router

Una migrazione non consiste soltanto nel rinominare le cartelle. Il codice dell'App Router introduce un modello di componenti orientato innanzitutto al server e pattern diversi per layout, accesso ai dati, stati di caricamento e comportamento delle route. I team dovrebbero individuare questi cambiamenti concettuali prima di convertire un'applicazione matura.

I nuovi progetti dovrebbero generalmente consultare per prima la documentazione dell'App Router, perché descrive il modello attuale del framework. Le applicazioni esistenti basate sul Pages Router dovrebbero valutare la migrazione in base a vantaggi effettivi, dipendenze, impegno necessario per i test e costi di manutenzione, anziché considerare il supporto continuato come un difetto.

Documentazione ed esempi potrebbero riferirsi a un solo router. Prima di copiare un'implementazione, gli sviluppatori dovrebbero verificare quale router utilizza e se le API citate siano applicabili al loro progetto.

Rendering, cache e riconvalida

Next.js non esegue il rendering di ogni pagina nello stesso modo. Una route può essere preparata prima dell'arrivo di un visitatore, generata utilizzando informazioni specifiche della richiesta, memorizzata nella cache oppure aggiornata secondo una politica di riconvalida.

Esigenza della route Probabile approccio di distribuzione Domanda da verificare
Gli input sono noti in anticipo Output prerenderizzato Quale evento dovrebbe causare la modifica dell'output?
L'output dipende da cookie, header o dati della richiesta Rendering dinamico Una parte del lavoro può comunque essere memorizzata nella cache in sicurezza?
Il contenuto cambia secondo una pianificazione controllata Output memorizzato nella cache con riconvalida Quanto può diventare obsoleta la risposta?
Non sono necessarie funzionalità disponibili soltanto sul server L'esportazione statica può essere adatta Tutte le route e le risorse sono compatibili con i limiti dell'esportazione?

La memorizzazione nella cache non è un singolo interruttore che può essere compreso indipendentemente dall'accesso ai dati. I team devono sapere quali operazioni vengono memorizzate nella cache, quali route diventano dinamiche e come avvengono l'invalidazione o la riconvalida. Queste regole dovrebbero essere testate con modifiche realistiche ai contenuti.

Questo è particolarmente importante per pagine autenticate, prezzi, inventari, dashboard e altre informazioni con requisiti espliciti di aggiornamento. Servire output memorizzato nella cache può essere utile, ma soltanto quando le regole di correttezza dell'applicazione lo consentono.

Le prestazioni e la visibilità nei motori di ricerca non dovrebbero essere dedotte soltanto dall'etichetta del rendering. Il prerendering può ridurre il lavoro al momento della richiesta e il rendering server può fornire HTML iniziale significativo, ma i risultati effettivi dipendono dalla struttura della pagina, dalle risorse, dalla latenza dei dati, dal JavaScript eseguito nel browser, dalla cache e dal comportamento della distribuzione.

Esportazione statica e requisiti di runtime

Next.js può generare un'esportazione statica quando il progetto non dipende da funzionalità del framework disponibili soltanto sul server. I file HTML, CSS, JavaScript e le risorse risultanti possono essere serviti da un'infrastruttura che supporta normali file statici.

L'output statico può comunque includere Client Components. La distribuzione statica descrive come viene ospitato il risultato della build; non significa che ogni interfaccia debba essere priva di interattività. Il codice lato browser può comunque fornire stato, eventi e altri comportamenti client.

Prima di scegliere l'esportazione statica, verifica che il progetto non richieda:

  • Risposte generate da dati server specifici della richiesta.
  • Comportamenti delle route che dipendono da un runtime Next.js attivo.
  • Funzionalità non supportate per immagini, routing o server.
  • Regole di aggiornamento che non possono essere rispettate ricostruendo il progetto o mediante un altro processo di aggiornamento supportato.
  • Endpoint server che devono essere eseguiti insieme all'applicazione.

Quando queste funzionalità sono necessarie, l'applicazione richiede un runtime compatibile. Ciò non impone la distribuzione su Vercel: la guida ufficiale alla distribuzione documenta il self-hosting e gli adattatori per le piattaforme. Il supporto varia a seconda della piattaforma, quindi la compatibilità dovrebbe essere verificata rispetto alle specifiche funzionalità utilizzate.

Route Handlers ed endpoint lato server

Nell'App Router, i Route Handlers consentono a un'applicazione di definire gestori delle richieste HTTP utilizzando i concetti standard di richiesta e risposta. Sono utili per gli endpoint che appartengono all'applicazione, inclusi l'elaborazione dei moduli, i webhook, le risposte contenenti dati o i callback delle integrazioni.

Un Route Handler non è automaticamente la sede corretta per ogni sistema backend. I team dovrebbero comunque decidere come gestire autenticazione, autorizzazione, convalida, limiti di frequenza, attività durevoli e gestione degli errori. I servizi di lunga durata o scalabili in modo indipendente potrebbero essere separati più opportunamente dall'applicazione web.

Una valutazione pratica pone queste domande:

  1. L'endpoint deve accedere al codice dell'applicazione o a tipi condivisi?
  2. Richiede segreti al momento della richiesta o dipendenze disponibili soltanto sul server?
  3. La piattaforma di distribuzione scelta può eseguire il gestore come documentato?
  4. Quale comportamento della cache è corretto per ciascun metodo HTTP e ciascuna risposta?
  5. Un servizio separato offrirebbe una proprietà o una scalabilità più chiare?

I Route Handlers rendono pratica la composizione full-stack, ma la praticità non elimina le normali responsabilità relative alla progettazione e alla sicurezza delle API.

Quando Next.js è una scelta pratica

Next.js è un candidato valido per i team che hanno già familiarità con React e necessitano di routing applicativo e funzionalità server nella stessa base di codice. Può inoltre essere adatto a prodotti nei quali route diverse presentano esigenze di distribuzione sostanzialmente differenti.

Gli utilizzi comuni includono:

  • Aree account e dashboard con dati server e controlli interattivi.
  • Esperienze commerciali o cataloghi che combinano contenuti stabili con informazioni dipendenti dalla richiesta.
  • Siti di documentazione o marketing che includono anche flussi di lavoro applicativi.
  • Prodotti che necessitano insieme di risposte HTML, interazione client ed endpoint server.
  • Applicazioni React le cui route traggono vantaggio da politiche separate di cache e rendering.

Il framework può rappresentare un'infrastruttura più complessa di quanto richiesto da un semplice sito di contenuti. Un team che pubblica principalmente articoli statici dovrebbe confrontare le proprie esigenze con strumenti incentrati sulla distribuzione di contenuti, specialmente se soltanto una piccola parte del sito richiede interazione React.

Next.js può inoltre essere poco adatto quando il team non può supportarne i requisiti di runtime, non desidera concetti di rendering specifici del framework oppure avrebbe difficoltà a mantenere chiari i confini tra server e client. La flessibilità è preziosa soltanto quando l'architettura rimane comprensibile.

Confronto tra Next.js, Astro e altre opzioni

Next.js e Astro vengono spesso valutati per progetti che combinano contenuti ed elementi interattivi, ma le loro impostazioni predefinite e i loro modelli mentali sono differenti. La scelta appropriata dipende dalle route effettive, non dall'affermazione generica che un framework sia più veloce o migliore.

Per un confronto utile, crea la stessa pagina rappresentativa con ogni candidato e registra:

  • Quanto JavaScript raggiunge il browser prima e dopo l'interazione.
  • Come vengono caricati i dati e come ne viene controllato l'aggiornamento.
  • Se sono necessarie funzionalità di runtime server.
  • Come vengono implementati routing, layout, moduli e stati di errore.
  • Se l'host scelto supporta ogni funzionalità necessaria.
  • Quanto facilmente il team riesce a testare e spiegare l'architettura risultante.

Astro merita particolare considerazione per i siti incentrati sui contenuti, nei quali la maggior parte dell'output può rimanere statica e le isole interattive sono limitate. Next.js diventa più convincente quando React è il modello applicativo centrale e le funzionalità server e client devono essere composte in tutto il prodotto.

Nessuno dei due confronti predice un punteggio prestazionale. Immagini, font, script di terze parti, scelte dei componenti, latenza dei dati e confini client possono avere un impatto maggiore delle impostazioni predefinite del framework.

Origini, governance e community

La pagina ufficiale sulla governance afferma che il team di Vercel ha creato Next.js nel 2016. Afferma inoltre che il team principale di Vercel guida la ricerca e lo sviluppo del progetto. Questa è una dichiarazione sull'origine e sulla governance a livello di team; non dovrebbe essere sostituita da un'affermazione non supportata riguardante un singolo fondatore.

Come documentato nelle pagine sulla governance e nella documentazione disponibili il 27 agosto 2026, i percorsi di partecipazione pubblica al progetto includono:

  • Il repository GitHub ufficiale per codice sorgente, problemi e attività del progetto.
  • GitHub Discussions per domande e discussioni della community sulle RFC.
  • Il Discord di Next.js per il supporto gratuito della community.
  • Documentazione aggiornata sia per l'App Router sia per il Pages Router.

Questi canali offrono tipi diversi di assistenza. La documentazione dovrebbe essere il primo riferimento per il comportamento del framework, Discussions può far emergere proposte e domande condivise e Discord può sostenere la conversazione nella community. Nessuno di essi sostituisce i test specifici del progetto o il processo di supporto in produzione di un team.

Una checklist decisionale

Prima di adottare Next.js, i team dovrebbero rispondere a queste domande con un prototipo funzionante:

  • Quali route sono statiche, dinamiche, memorizzate nella cache o riconvalidate?
  • Quali componenti richiedono davvero stato, effetti, eventi o API del browser?
  • Quanto JavaScript client invia ogni route rappresentativa?
  • Quali endpoint appartengono ai Route Handlers e quali dovrebbero trovarsi altrove?
  • La piattaforma scelta può eseguire ogni funzionalità Next.js necessaria?
  • Come verranno gestiti l'aggiornamento della cache, gli errori, i log e le distribuzioni?
  • Il team comprende le differenze tra il router scelto e gli esempi scritti per l'altro router?

Next.js consiste nell'applicare React a un'applicazione web completa scegliendo consapevolmente dove viene svolto il lavoro e come viene distribuita ciascuna route. La sua flessibilità documentata è notevole, ma non garantisce prestazioni, risultati nei motori di ricerca, bassi costi operativi o semplicità architetturale. Questi risultati devono essere stabiliti attraverso l'implementazione e la misurazione.

Una risposta riuscita non garantisce la sicurezza. Le misurazioni descrivono una singola osservazione nel tempo.

Fonti principali

  1. 01Documentazione di Next.js (si apre in una nuova scheda)
  2. 02Server Components e Client Components di Next.js (si apre in una nuova scheda)
  3. 03Guida alla distribuzione di Next.js (si apre in una nuova scheda)
  4. 04Guida alle esportazioni statiche di Next.js (si apre in una nuova scheda)
  5. 05Riferimento sui React Server Components (si apre in una nuova scheda)
  6. 06Repository ufficiale di Next.js (si apre in una nuova scheda)
  7. 07Governance di Next.js (si apre in una nuova scheda)
  8. 08Discussioni GitHub di Next.js (si apre in una nuova scheda)
  9. 09Discord di Next.js (si apre in una nuova scheda)

Domande frequenti

Risposte pratiche sul prodotto e sul suo funzionamento.

Che cos'è Next.js e qual è il suo rapporto con React?

Next.js è un framework per creare applicazioni web full-stack con React. React fornisce il modello a componenti, mentre Next.js aggiunge routing, rendering, funzionalità server, convenzioni per la cache, compilazione, bundling e strumenti orientati alla distribuzione.

Qual è la differenza tra Server Components e Client Components?

Nell'App Router, per impostazione predefinita layout e pagine sono Server Components e il codice dei loro componenti non viene inviato al browser come codice client. I Client Components vengono utilizzati per stato, gestori di eventi, effetti e API disponibili soltanto nel browser. Una route può comporre entrambi i tipi.

Next.js può generare un sito web completamente statico?

Sì. Next.js supporta l'esportazione statica per i progetti che non richiedono funzionalità del framework disponibili soltanto sul server. Le pagine esportate possono comunque contenere Client Components per l'interazione nel browser, ma le funzionalità eseguite al momento della richiesta necessitano di un runtime compatibile.

Ogni pagina Next.js utilizza il rendering lato server?

No. Le route possono essere prerenderizzate, renderizzate dinamicamente a partire da input specifici della richiesta, memorizzate nella cache o riconvalidate. I Server Components descrivono dove viene eseguita la logica dei componenti; non determinano da soli quando viene prodotto l'output di una route.

Un'applicazione Next.js deve essere distribuita su Vercel?

No. La guida ufficiale alla distribuzione documenta il self-hosting e gli adattatori per le piattaforme. I team dovrebbero verificare che l'ambiente scelto supporti le funzionalità di runtime, cache, riconvalida, immagini e routing utilizzate dalla loro applicazione.

Qual è la differenza tra App Router e Pages Router?

L'App Router è il modello più recente e utilizza per impostazione predefinita i Server Components per layout e pagine. Il Pages Router segue il precedente modello di pagina di Next.js e continua a essere supportato. È necessario verificare a quale router sono destinati guide ed esempi.

Cosa dovrebbe testare un team prima di scegliere Next.js?

Crea una route rappresentativa con dati e interazioni reali. Esamina i confini tra Server Components e Client Components, il JavaScript nel browser, il comportamento del rendering e della cache, i requisiti dei Route Handlers, la compatibilità della distribuzione, le regole di aggiornamento e le responsabilità operative.

Continue exploring

More published records in Developer Tools.

View all alternatives

Come Astro trasforma i contenuti in HTML e aggiunge interattività in modo selettivo

Developer ToolsTailwind CSS

Gatsby collega i siti web React a contenuti strutturati e a un rendering flessibile

Developer ToolsGoogle Analytics

nuxt.com

200 OK

Crea siti web e applicazioni Vue con routing, logica server e rendering flessibile

Developer ToolsNuxtVercel