NestJS vs Next.js: ruoli diversi, spesso nello stesso progetto
NestJS vs Next.js: framework backend o framework React? | We.Inc
NestJS crea API server in Node.js; Next.js crea siti web React con un po' di codice server. Guarda lo stesso endpoint in entrambi, come lavorano insieme e quando ti serve ciascuno.
NestJS e Next.js non sono rivali. NestJS è un framework per applicazioni Node.js lato server: controller, moduli e dependency injection per le API. Next.js è un framework React per costruire pagine web, con i Route Handler per il lavoro di backend leggero. Le app piccole possono vivere interamente in Next.js; i sistemi più grandi spesso mettono un'API NestJS dietro un front end Next.js.
A cosa serve ciascun framework
Domanda
NestJS
Compito principale
Applicazioni lato server e API
Siti web e app web React
Renderizza pagine?
No, restituisce dati
Sì, Server Component e Client Component
Linguaggio
Costruito con TypeScript, JavaScript consentito
JavaScript o TypeScript
Livello HTTP
Express di default, Fastify opzionale
Il proprio server tramite next start
Stile degli endpoint
Classe @Controller con metodi @Get
route.ts che esporta GET, POST e così via
Avviare un progetto
nest new project-name
npx create-next-app@latest
Porta locale di default
Qui sotto c'è un solo endpoint, un elenco di gatti su GET /cats, scritto come controller NestJS e come Route Handler Next.js. Cambia esempio per vedere una route POST e la configurazione che permette a una pagina Next.js di chiamare un'API NestJS.
Scegli un esempio: un elenco in GET, una creazione in POST o il collegamento tra le due app.
Leggi il codice NestJS a sinistra e il codice Next.js a destra.
Usa la nota per vedere cosa ti offre gratis ciascun framework.
Copia la versione adatta al tuo progetto.
Entrambi i server di sviluppo usano di default la porta 3000. Quando li fai girare insieme, avvia NestJS su un'altra porta, per esempio 3001.
Se il browser chiama direttamente l'API NestJS, attiva CORS in NestJS per l'origine del tuo sito. Se la chiama solo il codice server di Next.js, CORS non entra in gioco.
Tieni l'indirizzo dell'API in una variabile d'ambiente solo lato server quando la chiamano soltanto Server Component o Route Handler.
Condividi i tipi di richiesta e risposta tramite un piccolo pacchetto importato da entrambe le app, così un campo rinominato rompe la build invece della produzione.
Domande frequenti
Next.js può sostituire NestJS?
Per un'app piccola, spesso sì. I Route Handler coprono GET, POST, PUT, PATCH, DELETE, HEAD e OPTIONS con le Web API Request e Response. NestJS si guadagna il suo posto quando il backend cresce: molti moduli, job in background, diversi client come le app mobili e un team che vuole una struttura imposta.
NestJS può renderizzare pagine React?
Non è fatto per questo. NestJS restituisce dati, con gli oggetti serializzati in JSON di default. Per le pagine usa Next.js o un altro framework front end.
Mi serve TypeScript per NestJS?
NestJS è costruito con TypeScript e lo supporta pienamente, e la documentazione dice che puoi comunque scrivere JavaScript semplice. Quasi tutti gli esempi e le guide usano TypeScript, quindi aspettati di usarlo.
Le due app devono stare in un unico repository?
Un monorepo con due app e un pacchetto di tipi condiviso funziona bene per un solo team. I repository separati sono adatti a team separati con propri calendari di rilascio.
Quale dovrei imparare per primo?
Se vuoi mettere online un sito web, inizia con Next.js. Impara NestJS quando costruisci un'API da cui dipendono diversi front end o servizi.
Cosa offre NestJS a un backend
NestJS si descrive come un framework per costruire applicazioni Node.js lato server efficienti e scalabili. Organizza il codice in moduli, controller e provider e li collega tra loro con la dependency injection, il che mantiene coerente una grande API anche con molti sviluppatori.
Sotto il cofano usa Express di default. Passare all'adapter @nestjs/platform-fastify cambia il livello HTTP senza riscrivere i controller, anche se a quel punto il middleware specifico di Express richiede un equivalente Fastify.
Cosa offre Next.js a un sito web
Next.js renderizza React sul server, gestisce le route in base ai nomi di cartelle e file, e invia al browser solo le parti interattive. I suoi Route Handler bastano per invii di form, webhook e piccoli endpoint JSON che appartengono allo stesso sito.
Quello che non cerca di essere è un backend strutturato per altri client. Non ha un sistema di moduli né dependency injection, quindi una grande API costruita solo con file di route tende a perdere coerenza.
Come si combinano
La divisione più comune è Next.js per tutte le pagine e NestJS per la logica di business e i dati. I Server Component di Next.js recuperano i dati dall'API NestJS sul server, così segreti e URL interni non arrivano mai al browser, e i Client Component la chiamano solo quando devono.
Crea entrambi i progetti
Crea l'ossatura di un'API NestJS e di un sito Next.js
Installa lo strumento a riga di comando di Nest, crea l'API, poi crea il sito in una cartella allo stesso livello.
GET /cats
In NestJS il prefisso @Controller('cats') e @Get() costruiscono il percorso, e il controller viene registrato in un modulo. In Next.js il percorso della cartella è l'URL e il nome della funzione esportata è il metodo.
POST /cats
NestJS analizza per te il body JSON con @Body() e di default risponde a una POST con lo stato 201. Un Route Handler di Next.js legge il body con request.json() e imposta lo stato da solo.
Usarli insieme
NestJS passa alla porta 3001 e consente l'origine del sito. La pagina Next.js è un Server Component, quindi la fetch avviene sul server e API_URL resta privata.