NestJS vs Next.js: verschiedene Aufgaben, oft dasselbe Projekt
NestJS vs Next.js: Backend-Framework oder React-Framework? | We.Inc
NestJS baut Node.js-Server-APIs; Next.js baut React-Websites mit etwas Servercode. Sieh denselben Endpoint in beiden, wie sie zusammenarbeiten und wann du welches brauchst.
NestJS und Next.js sind keine Konkurrenten. NestJS ist ein Framework für serverseitige Node.js-Anwendungen: Controller, Module und Dependency Injection für APIs. Next.js ist ein React-Framework zum Bauen von Webseiten, mit Route Handlers für leichte Backend-Aufgaben. Kleine Apps können komplett in Next.js leben; größere Systeme setzen oft eine NestJS-API hinter ein Next.js-Frontend.
Wofür jedes Framework gedacht ist
Frage
NestJS
Hauptaufgabe
Serverseitige Anwendungen und APIs
React-Websites und Web-Apps
Rendert Seiten?
Nein, es gibt Daten zurück
Ja, Server und Client Components
Sprache
Mit TypeScript gebaut, JavaScript erlaubt
JavaScript oder TypeScript
HTTP-Schicht
Standardmäßig Express, optional Fastify
Eigener Server über next start
Endpoint-Stil
@Controller-Klasse mit @Get-Methoden
route.ts, die GET, POST und so weiter exportiert
Projekt starten
nest new project-name
npx create-next-app@latest
Lokaler Standardport
Unten siehst du einen Endpoint, eine Liste von Katzen unter GET /cats, einmal als NestJS-Controller und einmal als Next.js Route Handler. Wechsle die Beispiele, um eine POST-Route und das Setup zu sehen, mit dem eine Next.js-Seite eine NestJS-API aufruft.
Wähle ein Beispiel: eine GET-Liste, ein POST zum Anlegen oder die Verbindung zwischen beiden Apps.
Lies links den NestJS-Code und rechts den Next.js-Code.
Sieh im Hinweis nach, was dir jedes Framework ohne Zusatzaufwand liefert.
Kopiere die Version, die zu deinem Projekt passt.
Beide Dev-Server nutzen standardmäßig Port 3000. Wenn du sie parallel betreibst, starte NestJS auf einem anderen Port wie 3001.
Wenn der Browser die NestJS-API direkt aufruft, aktiviere CORS in NestJS für den Origin deiner Website. Wenn nur Servercode von Next.js sie aufruft, spielt CORS keine Rolle.
Halte die API-Adresse in einer reinen Server-Umgebungsvariable, wenn nur Server Components oder Route Handlers sie aufrufen.
Teile Request- und Response-Typen über ein kleines Paket, das beide Apps importieren, damit ein umbenanntes Feld den Build bricht statt die Produktion.
Häufige Fragen
Kann Next.js NestJS ersetzen?
Für eine kleine App oft ja. Route Handlers decken GET, POST, PUT, PATCH, DELETE, HEAD und OPTIONS mit den Web-APIs Request und Response ab. NestJS lohnt sich, wenn das Backend wächst: viele Module, Hintergrundjobs, mehrere Clients wie mobile Apps und ein Team, das eine verbindliche Struktur will.
Kann NestJS React-Seiten rendern?
Dafür ist es nicht gebaut. NestJS gibt Daten zurück, wobei Objekte standardmäßig zu JSON serialisiert werden. Nutze Next.js oder ein anderes Frontend-Framework für die Seiten.
Brauche ich TypeScript für NestJS?
NestJS ist mit TypeScript gebaut und unterstützt es vollständig, und laut Dokumentation kannst du trotzdem einfaches JavaScript schreiben. Fast jedes Beispiel und jeder Guide nutzt TypeScript, rechne also damit.
Sollten beide in einem Repository liegen?
Ein Monorepo mit zwei Apps und einem gemeinsamen Typenpaket funktioniert gut für ein Team. Getrennte Repositories passen zu getrennten Teams mit eigenen Release-Zyklen.
Was sollte ich zuerst lernen?
Wenn du eine Website online bringen willst, fang mit Next.js an. Lerne NestJS, wenn du eine API baust, von der mehrere Frontends oder Services abhängen.
Was NestJS einem Backend bietet
NestJS beschreibt sich als Framework zum Bauen effizienter, skalierbarer serverseitiger Node.js-Anwendungen. Es organisiert Code in Module, Controller und Provider und verbindet sie per Dependency Injection, was eine große API über viele Entwickler hinweg einheitlich hält.
Unter der Haube läuft es standardmäßig auf Express. Mit dem Adapter @nestjs/platform-fastify tauschst du die HTTP-Schicht aus, ohne deine Controller neu zu schreiben, allerdings brauchen Express-spezifische Middlewares dann ein Fastify-Gegenstück.
Was Next.js einer Website bietet
Next.js rendert React auf dem Server, routet anhand von Ordner- und Dateinamen und liefert nur die interaktiven Teile an den Browser. Seine Route Handlers reichen für Formular-Posts, Webhooks und kleine JSON-Endpoints, die zur selben Website gehören.
Was es nicht sein will, ist ein strukturiertes Backend für andere Clients. Es gibt kein Modulsystem und keine Dependency Injection, daher neigt eine große API, die nur aus Route-Dateien besteht, dazu, auseinanderzudriften.
Wie sie zusammenpassen
Die übliche Aufteilung ist Next.js für jede Seite und NestJS für Geschäftslogik und Daten. Server Components von Next.js rufen die NestJS-API auf dem Server ab, sodass Secrets und interne URLs nie den Browser erreichen, und Client Components rufen sie nur auf, wenn es sein muss.
Beide Projekte anlegen
Eine NestJS-API und eine Next.js-Website anlegen
Installiert das Nest-Kommandozeilentool, erstellt die API und legt dann die Website in einem benachbarten Ordner an.
GET /cats
In NestJS bilden das Präfix @Controller('cats') und @Get() den Pfad, und der Controller wird in einem Modul registriert. In Next.js ist der Ordnerpfad die URL und der Name der exportierten Funktion die Methode.
POST /cats
NestJS parst den JSON-Body für dich mit @Body() und beantwortet ein POST standardmäßig mit Status 201. Ein Next.js Route Handler liest den Body mit request.json() und setzt den Status selbst.
Beide zusammen
NestJS wechselt auf Port 3001 und erlaubt den Origin der Website. Die Next.js-Seite ist eine Server Component, daher läuft der fetch auf dem Server, und API_URL bleibt privat.