Next.js vs React: cosa aggiunge Next e quando ti serve
Next.js vs React
Next.js vs React: libreria o framework, quando basta Vite | We.Inc
React è una libreria UI; Next.js è un framework costruito su di essa. Spunta le funzionalità di cui ha bisogno il tuo progetto e scopri se fa per te Next.js o React con Vite, con il codice per entrambi.
React è una libreria per costruire interfacce utente a partire da componenti. Next.js è un framework che usa React e aggiunge routing basato sui file, rendering lato server, server component, endpoint API e strumenti di build. In entrambi i casi scrivi React. Scegli Next.js quando le pagine hanno bisogno di HTML renderizzato sul server, di segreti o di route backend; React con Vite va bene per le app che stanno dietro un login.
Cosa ottieni già pronto
Esigenza
React con Vite
Next.js (App Router)
Componenti, stato, hook
Sì
Sì, lo stesso React
Routing
Aggiungi una libreria di routing
Le cartelle in app/ diventano route
HTML renderizzato prima che si carichi JavaScript
No, a meno che tu non aggiunga SSR o prerendering
Sì, sul server o in fase di build
Server component e segreti sul server
No
Sì, layout e pagine sono server component per impostazione predefinita
Endpoint API nello stesso progetto
No, backend separato
File route.ts
Output
File statici da vite build
Server Node, o file statici con output: 'export'
Spunta le funzionalità di cui ha bisogno il tuo progetto. Ognuna è indicata come integrata in Next.js o semplice in un'app React con Vite, e il conteggio ti dà una raccomandazione di partenza. Il codice qui sotto mostra la stessa piccola pagina scritta in entrambi i modi.
Spunta ogni funzionalità di cui il tuo progetto ha bisogno ora, non un giorno.
Guarda verso quale lato pende ogni funzionalità e perché.
Leggi il conteggio e la raccomandazione sotto la lista.
Confronta i due esempi di codice per vedere quanto cambia.
Le tue conoscenze di React si trasferiscono del tutto. Componenti, hook e JSX sono identici; cambia dove stanno i file e dove gira il codice.
In Next.js, aggiungi 'use client' solo ai file che hanno bisogno di stato, effetti o API del browser. Marcare un intero layout come client invia molto più JavaScript.
Un'app Vite è fatta di file statici, quindi può stare su qualsiasi hosting statico. Un'app Next.js che usa funzionalità server ha bisogno di un hosting che esegua Node o dell'adattatore di piattaforma che scegli.
Se il traffico dalla ricerca conta, controlla cosa invia la tua pagina prima che giri JavaScript. Guarda il sorgente di una single page app Vite e vedrai per lo più un div root vuoto.
Domande frequenti
Next.js è meglio di React?
Non sono alternative nel senso comune, perché Next.js esegue React. La vera domanda è se vuoi il routing, il rendering lato server e le convenzioni di un framework, o una configurazione più leggera in cui scegli tu ogni pezzo.
Il team di React consiglia ancora Create React App?
L'attuale guida di react.dev consiglia di iniziare con un framework come Next.js o React Router, ed elenca Vite, Parcel e Rsbuild per costruire la propria configurazione da zero. Non elenca Create React App.
Next.js può produrre un sito statico come Vite?
Sì. Imposta output: 'export' in next.config.js e next build scrive HTML, CSS e JavaScript in una cartella out. Le funzionalità che richiedono un server in esecuzione, come cookie, rewrite, redirect e server action, non sono disponibili in questa modalità.
Dovrei imparare React prima di Next.js?
Impara prima le basi di React: componenti, props, stato ed effetti. Next.js aggiunge poi i concetti di routing e server, e il debug è molto più facile quando sai distinguere a quale livello appartiene ogni problema.
Un'app React con Vite è un male per la SEO?
Non automaticamente, ma per impostazione predefinita l'HTML non ha contenuto finché non gira JavaScript. Le pagine marketing che devono posizionarsi sono più facili con rendering lato server o prerendering; le dashboard dietro un login non ne hanno bisogno.
Libreria o framework
React decide come un componente trasforma lo stato in UI e aggiorna la pagina. Non decide come gli URL corrispondono alle schermate, dove si caricano i dati o come viene compilato il progetto. Queste scelte sono tue in un'app Vite e di Next.js in un'app Next.
Questo è lo scambio: Next.js elimina decisioni e aggiunge funzionalità server, e in cambio segui le sue convenzioni sulle cartelle ed esegui la sua build.
Cosa cambia nel tuo codice
In Next.js, app/blog/page.tsx è la route /blog e layout.tsx avvolge i suoi figli. Le pagine sono server component se non indicato diversamente, quindi possono fare await dei dati direttamente, e le parti interattive stanno in file che iniziano con 'use client'.
In un'app Vite, main.tsx renderizza un unico componente root dentro index.html, le route arrivano da una libreria come React Router, e i dati si caricano nel browser tramite fetch o una cache client.
Quando basta React con Vite
Strumenti interni, dashboard, editor e tutto ciò che sta dietro un accesso raramente hanno bisogno di HTML renderizzato sul server. Un'app Vite parte in fretta, si pubblica come file statici e mantiene semplice il modello mentale.
Se un'app del genere in seguito ha bisogno di pagine pubbliche, è comune mettere le pagine marketing su un sito separato e lasciare l'app così com'è.
La stessa pagina, in entrambi i modi
Next.js: una route che carica i dati sul server
Il percorso del file è l'URL. La pagina attende i dati prima che venga inviato l'HTML; solo il pulsante viene distribuito come JavaScript client.
React con Vite: la stessa lista caricata nel browser
Il routing arriva da React Router, e la lista appare dopo che il browser l'ha recuperata.
Avviare l'uno o l'altro progetto
Entrambi i comandi fanno alcune domande, tra cui se usare TypeScript.
Pagine pubbliche che devono posizionarsi nella ricerca
L'HTML generato sul server o in fase di build mette il contenuto nella prima risposta.
Query al database o chiavi API usate durante il rendering
I server component tengono le credenziali fuori dal bundle del browser.
Endpoint backend nello stesso progetto
I file route.ts diventano endpoint API.
Molte pagine di contenuto con layout condivisi
Routing per cartelle e layout annidati sono integrati.
Tutto sta dietro un accesso
I crawler non lo vedono mai, quindi il rendering nel browser va bene.
L'hosting deve essere fatto di semplici file statici
vite build produce asset statici; anche Next.js può farlo, ma perde le funzionalità server.
Un widget o strumento incorporato in un altro sito
Un solo bundle e un solo elemento root sono più semplici da inserire.
Imparare React in sé
Meno concetti alla volta: nessuna separazione tra server e client su cui ragionare.
Cosa si adatta al tuo progetto?
Esigenze del progetto
React con Vite
Next.js: {n}. React con Vite: {v}.
Spunta almeno un'esigenza per ottenere una raccomandazione.
Orientati verso Next.js. Le tue esigenze dipendono dal rendering lato server o dal codice server.
React con Vite copre questo caso. Puoi aggiungere un framework in seguito se compaiono pagine pubbliche.
È una scelta equilibrata. Scegli Next.js se una qualsiasi pagina pubblica deve posizionarsi; altrimenti inizia con Vite.