Next.js vs React: Was Next ergänzt und wann du es brauchst

Next.js vs React

Next.js vs React: Bibliothek vs Framework, wann Vite reicht | We.Inc

React ist eine UI-Bibliothek, Next.js ist ein darauf aufbauendes Framework. Hake die Funktionen ab, die dein Projekt braucht, und sieh, ob Next.js oder einfaches React mit Vite passt, mit Code für beide.

React ist eine Bibliothek, um Benutzeroberflächen aus Komponenten zu bauen. Next.js ist ein Framework, das React nutzt und dateibasiertes Routing, Server-Rendering, Server Components, API-Endpunkte und Build-Tooling ergänzt. Du schreibst in beiden Fällen React. Wähle Next.js, wenn Seiten serverseitig gerendertes HTML, Secrets oder Backend-Routen brauchen. Einfaches React mit Vite passt zu Apps, die hinter einem Login liegen.

Was du ohne Zusatzaufwand bekommst

Bedarf
React mit Vite
Next.js (App Router)

Komponenten, State, Hooks
Ja
Ja, dasselbe React

Routing
Router-Bibliothek ergänzen
Ordner in app/ werden zu Routen

HTML, das vor dem JavaScript gerendert wird
Nein, außer du ergänzt SSR oder Prerendering
Ja, auf dem Server oder beim Build

Server Components und Secrets auf dem Server
Nein
Ja, Layouts und Seiten sind standardmäßig Server Components

API-Endpunkte im selben Projekt
Nein, separates Backend
route.ts-Dateien

Ausgabe
Statische Dateien aus vite build
Node-Server oder statische Dateien mit output: 'export'

Hake die Funktionen ab, die dein Projekt braucht. Jede ist markiert als in Next.js eingebaut oder in einer Vite-React-App leicht umsetzbar, und die Zählung gibt dir eine erste Empfehlung. Der Code unten zeigt dieselbe kleine Seite auf beide Arten.

Hake jede Funktion ab, die dein Projekt jetzt braucht, nicht irgendwann.
Sieh, zu welcher Seite jede Funktion tendiert und warum.
Lies die Zählung und die Empfehlung unter der Liste.
Vergleiche die beiden Codebeispiele, um zu sehen, wie viel sich ändert.

Dein React-Wissen lässt sich vollständig übertragen. Komponenten, Hooks und JSX sind identisch, es ändert sich nur, wo Dateien liegen und wo Code läuft.
Setze in Next.js 'use client' nur in Dateien, die State, Effects oder Browser-APIs brauchen. Ein ganzes Layout als Client zu markieren schickt viel mehr JavaScript.
Eine Vite-App besteht aus statischen Dateien und läuft daher auf jedem statischen Host. Eine Next.js-App mit Serverfunktionen braucht einen Host, der Node oder den gewählten Plattform-Adapter ausführt.
Wenn Suchtraffic wichtig ist, prüfe, was deine Seite sendet, bevor JavaScript läuft. Im Quelltext einer Vite-Single-Page-App siehst du meist nur ein leeres root-div.

Häufige Fragen

Ist Next.js besser als React?

Im üblichen Sinn sind sie keine Alternativen, denn Next.js führt React aus. Die eigentliche Frage ist, ob du das Routing, Server-Rendering und die Konventionen eines Frameworks willst oder ein schlankeres Setup, bei dem du jedes Teil selbst wählst.

Empfiehlt das React-Team noch Create React App?

Der aktuelle Leitfaden auf react.dev empfiehlt, mit einem Framework wie Next.js oder React Router zu starten, und nennt Vite, Parcel und Rsbuild für ein eigenes Setup von Grund auf. Create React App wird dort nicht genannt.

Kann Next.js wie Vite eine statische Website erzeugen?

Ja. Setze output: 'export' in next.config.js, und next build schreibt HTML, CSS und JavaScript in einen out-Ordner. Funktionen, die einen laufenden Server brauchen, etwa Cookies, Rewrites, Redirects und Server Actions, sind in diesem Modus nicht verfügbar.

Sollte ich React vor Next.js lernen?

Lerne zuerst die React-Grundlagen: Komponenten, Props, State und Effects. Next.js ergänzt darauf Routing und Serverkonzepte, und Debugging ist viel einfacher, wenn du erkennst, welches Problem zu welcher Ebene gehört.

Ist eine Vite-React-App schlecht für SEO?

Nicht automatisch, aber standardmäßig enthält das HTML keinen Seiteninhalt, bis JavaScript läuft. Marketingseiten, die ranken sollen, sind mit Server-Rendering oder Prerendering einfacher. Dashboards hinter einem Login brauchen das nicht.

Bibliothek oder Framework

React bestimmt, wie eine Komponente State in UI verwandelt und die Seite aktualisiert. Es bestimmt nicht, wie URLs auf Screens abgebildet werden, wo Daten geladen werden oder wie das Projekt gebaut wird. In einer Vite-App triffst du diese Entscheidungen, in einer Next-App trifft sie Next.js.
Das ist der Tausch: Next.js nimmt dir Entscheidungen ab und ergänzt Serverfunktionen, dafür folgst du seinen Ordnerkonventionen und nutzt seinen Build.

Was sich in deinem Code ändert

In Next.js ist app/blog/page.tsx die Route /blog, und layout.tsx umschließt ihre Kinder. Seiten sind Server Components, sofern nicht anders markiert, und können daher direkt auf Daten warten. Interaktive Teile liegen in Dateien, die mit 'use client' beginnen.
In einer Vite-App rendert main.tsx eine Root-Komponente in index.html, Routen kommen aus einer Bibliothek wie React Router, und Daten werden im Browser per fetch oder über einen Client-Cache geladen.

Wann einfaches React mit Vite reicht

Interne Tools, Dashboards, Editoren und alles hinter einer Anmeldung brauchen selten serverseitig gerendertes HTML. Eine Vite-App startet schnell, wird als statische Dateien deployt und hält das mentale Modell klein.
Wenn eine solche App später öffentliche Seiten braucht, ist es üblich, die Marketingseiten auf eine separate Website zu legen und die App selbst so zu lassen, wie sie ist.

Dieselbe Seite auf beide Arten

Next.js: eine Route, die Daten auf dem Server lädt

Der Dateipfad ist die URL. Die Seite wartet auf Daten, bevor HTML gesendet wird, nur der Button wird als Client-JavaScript ausgeliefert.

React mit Vite: dieselbe Liste, im Browser geladen

Das Routing kommt von React Router, und die Liste erscheint, nachdem der Browser sie abgerufen hat.

Eines der beiden Projekte starten

Beide Befehle stellen ein paar Fragen, unter anderem, ob TypeScript verwendet werden soll.

Öffentliche Seiten, die in der Suche ranken müssen

HTML vom Server oder aus dem Build bringt Inhalte in die erste Antwort.

Datenbankabfragen oder API-Schlüssel beim Rendern

Server Components halten Zugangsdaten aus dem Browser-Bundle heraus.

Backend-Endpunkte im selben Projekt

route.ts-Dateien werden zu API-Endpunkten.

Viele Inhaltsseiten mit gemeinsamen Layouts

Ordner-Routing und verschachtelte Layouts sind eingebaut.

Alles liegt hinter einer Anmeldung

Crawler sehen es nie, also ist Rendern im Browser in Ordnung.

Hosting muss aus einfachen statischen Dateien bestehen

vite build gibt statische Assets aus. Next.js kann das auch, verliert dabei aber die Serverfunktionen.

Ein Widget oder Tool, eingebettet in eine andere Website

Ein Bundle und ein Root-Element lassen sich einfacher einbinden.

React selbst lernen

Weniger Konzepte auf einmal: keine Trennung zwischen Server und Client, über die du nachdenken musst.

Was passt zu deinem Projekt?

Projektanforderungen

React mit Vite

Next.js: {n}. React mit Vite: {v}.

Hake mindestens eine Anforderung ab, um eine Empfehlung zu bekommen.

Tendiere zu Next.js. Deine Anforderungen hängen von Server-Rendering oder Servercode ab.

Einfaches React mit Vite deckt das ab. Ein Framework kannst du später ergänzen, falls öffentliche Seiten dazukommen.

Es ist knapp. Wähle Next.js, wenn irgendeine öffentliche Seite ranken muss, sonst starte mit Vite.