Next.js verstehen
Das Fundament, auf dem dein Projekt steht.
Was du nach diesem Modul kannst
- Du verstehst Pages, Components und Layouts wie Räume in einem Haus.
- Du weißt, warum Next.js das Lieblings-Framework moderner Teams ist.
- Du kannst Cursor präzise sagen, was du bauen möchtest.
Du musst Next.js nicht selbst schreiben können. Ein Grundverständnis lohnt sich trotzdem. Damit kannst du der KI genau sagen, wo etwas hin soll, und ihre Antworten besser einordnen.
Definition
Was ist Next.js in einem Satz?
Next.js ist das Framework, mit dem 2026 die meisten modernen Webseiten gebaut werden: von OpenAI über Adidas bis Notion. Es ist kostenlos, von Vercel entwickelt und liefert von Haus aus alles, was eine moderne Webseite braucht: schnelle Seiten, gute Google-Auffindbarkeit (), Bilder-Optimierung, mobile Performance.
Mentales Modell
Eine Next.js-Seite ist wie ein Haus
Layout = die Wand
Header, Footer, Navigation. Bleibt überall gleich.
Page = ein Raum
Eine URL, ein Inhalt. Die Startseite, die Über-uns-Seite.
Component = ein Möbelstück
Ein Button, eine Karte, ein Bild, wieder verwendbar.
Wortschatz
Drei Wörter, die deine Konversationen mit der KI besser machen
Wenn du Cursor sagen willst „bau mir eine neue Seite“ oder „mach diesen Block wiederverwendbar“, reichen drei Begriffe aus dem Alltag:
01
Page
= eine URL
Jede Datei page.tsx in einem Ordner ergibt eine Seite. Ordnername = URL.
z. B. /, /preise, /ueber-uns
02
Layout
= die Hülle
Was auf allen Seiten gleich bleibt. Einmal definiert, gilt überall.
z. B. Header, Footer, Nav
03
Component
= ein Möbelstück
Wiederverwendbarer Baustein. Einmal bauen, an mehreren Stellen einsetzen.
z. B. Button, Hero, Card
Wix, Webflow und Framer sind Baukästen. Sie passen gut, wenn deine Idee ein klassischer Webseiten-Use-Case bleibt. Sobald eigene Logik dazu kommt (Login, Datenbank, API-Anbindungen, mobile App auf dem gleichen Code-Stack), stößt du an die Decke dieser Anbieter.
Mit Next.js startest du in der gleichen Liga wie die größten Tech-Unternehmen. Sobald dein Produkt erfolgreich wird, musst du nicht migrieren, sondern wächst einfach mit.
Vergleich
Baukasten oder Framework?
Webflow / Wix
Baukasten
Next.js
Framework
Sprache
Schreiben musst du nicht. Benennen schon.
Beobachte den Unterschied: eine vage Anweisung führt zu generischem Code, eine präzise Anweisung führt zu Code, der sich passend anfühlt.
Vage
„Mach mal eine Über-uns-Seite“
Cursor weiß nicht, wo, wie, in welchem Ton, mit welchen Inhalten.
Präzise
„Erstelle eine neue Page unter /ueber-uns in unserem Layout, mit einer Hero-Component und drei Team-Cards mit Name, Rolle und Bild.“
Cursor versteht jeden Begriff und liefert genau das.
Was wir absichtlich weglassen
Server vs. Client, App Router, Cache & Co.
Rund um Next.js gibt es viele tiefe Themen: Server Components, Caching, API-Routes. Für den Start brauchst du davon nichts. Sobald deine Idee ernst wird, übergibst du an deine Entwickler:innen, und die kennen sich aus. Modul 05 zeigt dir, wie diese Übergabe sauber abläuft.
Weiter geht's
Was du als Nächstes tust
Jetzt kommt der schönste Moment: wir bringen dein Projekt online, auf deine eigene Domain, automatisch deployt bei jedem Commit. Im nächsten Modul richten wir Vercel ein.