Next.js vs Node.js: che rapporto c'è tra i due

Next.js vs Node.js: framework e runtime spiegati | We.Inc

Node.js esegue JavaScript fuori dal browser; Next.js è un framework React che gira sopra di esso. Guarda lo stack livello per livello, lo stesso endpoint in entrambi e quando usare l'uno o l'altro.

Node.js è un runtime: il programma che esegue JavaScript su un server o sul tuo portatile. Next.js è un framework React per creare siti web, e i suoi strumenti di build e il suo server girano su Node.js. Quindi raramente si tratta di scegliere l'uno o l'altro. Ogni app Next.js ha bisogno di Node.js sotto, mentre un'app Node.js non deve per forza coinvolgere Next.js.

Runtime contro framework

Domanda

Che cos'è
Runtime JavaScript
Framework React

Lo installi come
Un programma sulla macchina
Un pacchetto npm in un progetto

Crea pagine web?
Solo se scrivi tu quel codice
Sì, con routing e rendering integrati

Gestisce HTTP?
Con node:http o una libreria come Express
Pagine più Route Handlers

Dipende dall'altro?
No
Sì, minimo Node.js 20.9

Avvio in produzione
next build, poi next start

Il modo più rapido per capire il rapporto è guardare i livelli che una richiesta attraversa. Fai clic su ogni livello di una tipica app Next.js qui sotto per vedere cosa fa e chi ne è responsabile.

Fai clic su un livello, dal browser in alto al sistema operativo in basso.
Leggi cosa fa quel livello in un'app Next.js.
Confronta più in basso gli esempi del server Node.js semplice e del Route Handler di Next.js.
Usa le righe decisionali della tabella per scegliere ciò che serve al tuo progetto.

Controlla node --version prima di installare Next.js. La documentazione attuale indica Node.js 20.9 come minimo.
Usa una release di Node.js con supporto a lungo termine sui server, e fissa la stessa versione major in locale e in produzione.
Se il tuo progetto serve solo un'API senza pagine web, un semplice server Node.js o un framework backend è una scelta più leggera di Next.js.
Un export statico di un sito Next.js richiede Node.js solo in fase di build. Il risultato sono file semplici che qualsiasi web server può ospitare, rinunciando però alle funzioni solo lato server.

Domande frequenti

Next.js è un backend o un frontend?

Entrambi, entro certi limiti. Fa il rendering delle pagine React sul server, invia al browser le parti interattive e ti permette di scrivere Route Handlers per endpoint JSON. Non è pensato per essere un backend completo per molti altri client.

Devo imparare Node.js prima di Next.js?

Ti serve Node.js installato e un po' di dimestichezza con npm e il terminale. Non serve una conoscenza approfondita del modulo node:http, perché Next.js gestisce il server per te.

Next.js ha ancora un Edge Runtime?

L'opzione di route runtime ora indica 'nodejs' come predefinito e 'edge' come deprecato. La documentazione chiede di rimuovere l'export runtime dai file di route, quindi il codice nuovo dovrebbe dare per scontato Node.js.

Posso eseguire Next.js con Bun o Deno?

La documentazione di deploy di Next.js indica Bun come adapter verificato e Deno Deploy tra le altre piattaforme con una propria integrazione. Il supporto delle funzioni varia al di fuori del server Node.js, quindi controlla le note della piattaforma.

Express è lo stesso tipo di cosa di Next.js?

Più vicino di quanto lo sia Node.js, perché entrambi sono librerie sopra Node.js. Express è un toolkit minimale per server HTTP; Next.js è un framework completo per siti web costruito attorno a React.

Node.js in un paragrafo

Il sito di Node.js lo descrive come un runtime JavaScript asincrono e basato su eventi, pensato per creare applicazioni di rete scalabili. In pratica permette a JavaScript di leggere file, aprire porte di rete e parlare con i database, cose che un browser non consente.

Cosa aggiunge Next.js sopra

Next.js trasforma una cartella di componenti React in un sito: route basate sui file, rendering lato server, recupero dei dati, gestione di immagini e font, e un server di produzione. Quando esegui next start, quel server è un processo Node.js, e la documentazione dice che questo tipo di deploy supporta ogni funzione di Next.js.
Durante lo sviluppo vale lo stesso per next dev, e next build gira su Node.js per compilare e prerenderizzare le pagine.

Scegliere per un progetto

Stai creando un sito o una web app con React? Usa Next.js, e accetta Node.js come parte della configurazione. Stai creando uno strumento da riga di comando, un worker che elabora una coda o un'API pura? Scrivilo direttamente per Node.js o con un framework backend, e lascia perdere Next.js del tutto.

Server Node.js semplice

Usa solo il modulo integrato node:http. Porta, header e routing li decidi tu. Avvialo con node server.mjs.

Route Handler di Next.js

Il percorso del file diventa /api/hello e Next.js gestisce il server. I percorsi sconosciuti ricevono automaticamente la pagina 404 del framework.

Dove gira Node.js in un progetto Next.js

Script di package.json

Ogni script avvia un processo Node.js: il server di sviluppo, la build di produzione e il server di produzione.

Browser

Il visitatore

Riceve l'HTML che Next.js ha generato sul server, poi carica JavaScript solo per i Client Components così pulsanti e form funzionano.

Il codice della tua app

Pagine, layout e Route Handlers nella cartella app. È React più alcune convenzioni di Next.js, scritto in JavaScript o TypeScript.

Il framework

Associa le cartelle agli URL, esegue il rendering dei Server Components, crea il bundle del codice client e gestisce il server di produzione avviato da next start.

Il runtime

Esegue sul server tutto il JavaScript dei livelli sopra: la build, il server di sviluppo e ogni richiesta in produzione.

Sistema operativo

Il tuo hosting

macOS, Windows, Linux o un container. Next.js indica macOS, Windows incluso WSL, e Linux come supportati per lo sviluppo.

I livelli di un'app Next.js

Scegli un livello

Responsabile: {v}

Livello {n} di {v}, dall'alto in basso

Inizia gratis · Nessuna carta di credito richiesta

Correlati: Guide

Prodotto

Per chi è

Funzionalità

Risorse

Azienda

Mappa del sito