Einordnung und Projektsetup

Einordnung und Projektsetup

0:00 Willkommen zum ersten Modul. Wenn Sie React kennen, bringen Sie schon die halbe Ausrüstung mit — und werden trotzdem an einigen Stellen umlernen müssen. Next.js hat sich in den letzten Jahren von einem Werkzeug für Serverrendering zu einer kompletten Plattform entwickelt, auf der ganze Geschäftsanwendungen laufen. In diesem Modul klären wir zuerst, was das Framework eigentlich übernimmt, auf welchem Stand wir arbeiten und wie ein Projekt entsteht.

0:25 Am Ende läuft eine Anwendung auf Ihrem Rechner, die uns durch alle vierzehn Module begleitet: das Serviceportal einer Marina. Fangen wir mit der Frage an, die viele überspringen — warum überhaupt ein Framework.

Was Next.js zu React hinzufügt

0:37 Beginnen wir mit einer Einordnung, die sich lohnt, auch wenn Sie die Entscheidung für Next.js längst getroffen haben. Denn wer weiß, welche Aufgaben das Framework tatsächlich übernimmt, versteht später besser, warum bestimmte Dinge so und nicht anders funktionieren — und warum manche Gewohnheit aus React-Projekten hier ins Leere läuft.

0:55 Genauso wichtig ist die Gegenrichtung: Sie sollen die Fälle erkennen, in denen ein Framework schlicht zu viel des Guten wäre. Wir sehen uns also zuerst die Arbeitsteilung an. Stellen Sie sich React als einen sehr guten Motor vor. Er läuft zuverlässig, er ist schnell — aber er ist kein Auto. Es fehlen Lenkung, Karosserie, Tank und Getriebe.

1:15 Genau das liefert Next.js: Routing, Serverrendering, Datenzugriff, Bundling und Deployment kommen fertig mit. Der entscheidende Punkt ist aber ein anderer: React Server Components, die Grundlage des heutigen Next.js, brauchen zwingend etwas, das sie auf einem Server rendert und ausliefert. Ohne Framework sind sie praktisch nicht einsetzbar. Aus einer Geschmacksfrage ist damit eine strukturelle geworden.

1:40 Vor einigen Jahren hätte man diese Entscheidung noch offen diskutieren können. Inzwischen hat das React-Team selbst Position bezogen: Create React App ist abgekündigt, und für neue Anwendungen wird ausdrücklich ein Framework empfohlen. Das ist keine Marketingaussage, sondern eine Konsequenz aus der eigenen Architektur. Für Sie heißt das: Framework-Wissen ist heute Grundlagenwissen, kein Spezialgebiet mehr.

2:04 Eine Einschränkung bleibt trotzdem, und die ist wichtig. Wenn Sie nur ein interaktives Widget in eine bestehende Seite hängen, ist das alles hier zu viel. Das richtige Werkzeug hängt an der Aufgabe, nicht am Trend. Diese Tabelle sagt weniger über Funktionen als über Verantwortung. Sehen Sie sich die Verteilung an: React kümmert sich um genau eine Zeile — Komponenten und Zustand.

2:27 Alles darunter liegt beim Framework. Und das ist der eigentliche Denkwechsel: Sie treffen diese Entscheidungen nicht mehr selbst. Wie geroutet wird, wie gebaut wird, wie ausgeliefert wird — das ist vorgegeben. Manche empfinden das als Einschränkung. In der Praxis ist es meist eine Entlastung, weil diese Fragen in jedem Projekt neu und meistens schlechter beantwortet wurden. Sie tauschen Freiheit gegen Konsistenz.

2:52 Ob sich das lohnt, hängt davon ab, wie viel Sie tatsächlich bauen. Drei Missverständnisse begegnen mir immer wieder. Das erste: Next.js sei React mit ein paar Zusatzpaketen. Das ist es nicht — es ist ein anderes mentales Modell, und wer das übergeht, kämpft später gegen das Framework statt mit ihm. Das zweite: Man müsse es immer nehmen.

3:13 Für eine Seite mit etwas Interaktion sind Sie mit weniger deutlich schneller fertig. Und das dritte, das gerade Skeptiker beruhigt: Framework-Wissen ist nicht dasselbe wie Framework-Bindung. Die Konzepte, die Sie hier lernen — Server-Client-Grenze, Caching, Datenzugriff — tragen weit über dieses eine Produkt hinaus.

Das Fundament: Next.js 16.3, React 19.2, TypeScript

3:33 Kommen wir zum Stand der Dinge. Versionsnummern klingen nach Kleinkram, sind hier aber tragend: Zwischen den Hauptversionen liegen echte Bruchstellen, und ein großer Teil dessen, was Sie im Netz an Beispielen finden, beschreibt eine andere Welt als die, in der wir arbeiten. Das gilt für Blogbeiträge, für ältere Kurse und, wie wir in Modul vierzehn sehen werden, auch für die Vorschläge von KI-Assistenten.

3:55 Deshalb legen wir unser Fundament ausdrücklich fest, bevor wir die erste Zeile schreiben. Wir arbeiten auf Next.js 16.3, React 19.2 und TypeScript. Zu TypeScript eine Vorbemerkung, weil das oft als Zusatzaufwand empfunden wird: Hier ist es keiner. Next.js erzeugt die Typen für Routen, Parameter und Suchparameter selbst, aus Ihrer Ordnerstruktur. Sie schreiben also nicht mehr Typen, Sie bekommen welche geschenkt.

4:21 Wer ohne TypeScript arbeitet, verzichtet auf eine Absicherung, die das Framework ohnehin schon berechnet hat. Das ist ungefähr so, als würden Sie das Navigationsgerät im Auto ausbauen, weil Sie den Weg schon kennen. Diese Tabelle hat eine Eigenschaft, die selten ist: Alles darin bekommen Sie ohne eine einzige Zeile Codeänderung.

4:42 Ein Versionssprung, der Speicherverbrauch und Buildzeiten deutlich senkt, ist im Alltag mehr wert als manches neue Feature — er wirkt jeden Tag und für jeden im Team. Besonders die erste Zeile verdient Aufmerksamkeit. Wenn ein Entwicklungsserver nach ein paar Stunden zwanzig Gigabyte belegt, ist das kein Schönheitsfehler, sondern der Grund, warum Leute ihren Rechner neu starten.

5:03 Meine Einschätzung: Wenn Sie ein bestehendes Projekt haben, ist das Update auf 16.3 die günstigste Verbesserung, die Sie gerade bekommen können. Der eigentliche Gewinn liegt nicht darin, Tippfehler zu finden. Er liegt darin, dass die Server-Client-Grenze sichtbar wird — jene Trennlinie, um die sich das halbe Seminar dreht.

5:22 An den Prop-Typen erkennen Sie, was tatsächlich über diese Grenze wandert, und damit auch, was im Browser landet. Das ist später ein Sicherheitsthema und keine Stilfrage. Dazu kommt der praktische Effekt: Fehler beim Datenzugriff zeigen sich beim Tippen und nicht erst, wenn ein Nutzer auf eine leere Seite schaut. Behalten Sie die Grenze im Hinterkopf, wir kommen in Modul vier ausführlich darauf zurück.

5:46 Hier passiert etwas Unspektakuläres mit spürbarer Wirkung. TypeScript 7 ist eine Neuentwicklung in einer anderen Programmiersprache, mit dem einzigen Ziel, deutlich schneller zu prüfen. Und das Bemerkenswerte: Sie heben eine Abhängigkeit an, mehr nicht. Keine Konfiguration, keine Migration, kein Umschreiben. Next.js erkennt die neue Version und nutzt sie beim Bauen.

6:09 Worauf es ankommt, ist die Einordnung: Typprüfung ist der Schritt, den Teams als Erstes aus der Pipeline werfen, wenn sie zu lange dauert. Wird sie schnell, bleibt sie drin. Genau deshalb ist Geschwindigkeit hier eine Qualitätsfrage.

Das Projekt anlegen

6:24 Jetzt wird es praktisch. Wir legen das Projekt an, das uns durch alle vierzehn Module begleitet, und lernen dabei gleich unsere Beispieldomäne kennen. Beim Anlegen stellt das Werkzeug ein paar Fragen, die harmlos aussehen und in Sekunden durchgeklickt sind. Zwei davon prägen anschließend jeden einzelnen Import, den Sie schreiben, und lassen sich später nur mit Aufwand zurücknehmen.

6:46 Deshalb gehen wir sie einzeln durch und entscheiden bewusst, statt die Vorgaben zu bestätigen. Unser Beispiel ist das Serviceportal einer Marina, also eines Sportboothafens. Es gibt Liegeplätze, Gäste mit ihren Booten, Buchungen und Rechnungen — und drei Rollen: den Gast, den Hafenmeister und die Verwaltung. Diese Domäne begleitet uns mit Absicht durch alle vierzehn Module.

7:08 Sie ist klein genug, um sie in fünf Minuten zu verstehen, und groß genug, um alles zu tragen, was wir brauchen: Listen, Formulare, Rechte, Geld, Termine. Wenn wir später über Caching oder Berechtigungen sprechen, sprechen wir immer über konkrete Liegeplätze und nicht über abstrakte Entitäten. Drei Zeilen, und die Anwendung läuft.

7:29 Was hier im Hintergrund passiert, ist allerdings mehr als ein Ordner mit Dateien: Sie bekommen eine vollständig konfigurierte Werkzeugkette — Bundler, Typprüfung, Linting, Entwicklungsserver. Das ist der Unterschied zu früher, als man diese Teile einzeln zusammensuchte und aufeinander abstimmte. Worauf es ankommt: Nehmen Sie sich nach dem Start ein paar Minuten Zeit und sehen Sie sich an, was tatsächlich erzeugt wurde.

7:53 Wer die Vorlage nur benutzt, ohne sie einmal gelesen zu haben, wundert sich beim ersten Problem über Dateien, die er noch nie gesehen hat. Diese fünf Fragen laufen in wenigen Sekunden durch, und genau das ist die Gefahr. Der rote Faden dahinter: Die ersten beiden Antworten sind heute alternativlos — TypeScript und App Router, alles andere führt Sie in eine Sackgasse, aus der die Dokumentation Sie nicht mehr begleitet.

8:17 Die Fragen drei und vier sind die eigentlichen Entscheidungen. Ob Ihr Code in einem eigenen Unterordner liegt und wie Ihre Importpfade abgekürzt werden, sehen Sie danach in jeder einzelnen Datei. Beides lässt sich später nur mit einer Sammelmigration ändern. Und die fünfte Frage bestätigen Sie einfach — Turbopack ist inzwischen der Standard, kein Experiment.

8:38 Die ersten beiden Punkte haben denselben Kern: Was in der ersten Minute kostenlos ist, wird nach hundert Dateien zu einem Projekt. Ein Pfad-Alias nachzurüsten bedeutet, jeden Import im Repository anzufassen — technisch machbar, aber ein Änderungssatz, den niemand gern reviewt. Der dritte Punkt ist neu und überrascht viele: Das Werkzeug legt inzwischen Dateien für KI- Coding-Agenten mit an.

9:01 Wundern Sie sich also nicht über eine Datei, die Sie nicht angefordert haben. Wir sehen uns in Modul vierzehn genau an, was darin steht und warum sie tatsächlich nützlich ist. Jetzt sind Sie dran. Es geht nicht darum, möglichst schnell fertig zu sein — es geht darum, die Fragen bewusst zu beantworten und danach zu prüfen, ob Ihre Entscheidung auch wirklich greift.

9:23 Der Nachweis ist klein und eindeutig: Die Anwendung läuft, und ein Import über Ihren Alias löst auf. Wer früher fertig ist, öffnet die Datei für die KI-Agenten und liest, was da eigentlich hineingeschrieben wurde. Das ist ein guter Vorgriff auf das letzte Modul — und ehrlich gesagt eine der besseren Ideen der letzten Releases.

Turbopack als Standardwerkzeug

9:42 Kommen wir zu einem Thema, das selten auf Folien landet und trotzdem Ihren Arbeitstag prägt: dem Werkzeug, das im Hintergrund baut. Über Bundler spricht man normalerweise nur, wenn sie stören — wenn der Start zu lange dauert oder der Rechner zäh wird. Genau dort hat sich in der letzten Version etwas getan, das man nicht sieht, aber sehr deutlich merkt.

10:02 Und weil es ohne Codeänderung kommt, lohnt sich der kurze Blick darauf besonders. Turbopack ist der Bundler, der aus Ihren Dateien das macht, was der Browser versteht — und seit Next.js 16 ist er für Entwicklung und Build der Standard. Zwei Eigenschaften prägen den Alltag. Die erste ist ein Zwischenspeicher auf der Festplatte: Was sich nicht geändert hat, wird nicht neu gebaut.

10:25 Die zweite ist eine Speicherverdrängung, die alte Zwischenergebnisse wegräumt, statt sie endlos zu behalten. Beides klingt nach Interna. Man merkt es an einer sehr menschlichen Stelle — daran, wie oft man den Entwicklungsserver neu startet, weil der Rechner zäh wird. Rechnen wir kurz nach, denn das macht die Sache greifbar.

10:44 Wenn ein Build vier Minuten dauert und Sie ihn zehnmal am Tag anstoßen, sind das vierzig Minuten Wartezeit — jeden Tag, für jede Person im Team. Wird daraus eine Minute, gewinnen Sie eine halbe Stunde. Das ist kein Effizienzgerede, das ist der Unterschied zwischen einem Ablauf, den man gern durchläuft, und einem, den man umgeht.

11:04 Und der eigentliche Punkt: Sie bekommen das ohne eine Zeile Codeänderung. Solche Verbesserungen sind selten, deshalb lohnt es sich, sie mitzunehmen. Wichtiger als die einzelnen Zahlen ist ihre Größenordnung. Wir reden nicht über zehn oder zwanzig Prozent, sondern darum, dass aus einundzwanzig Gigabyte zwei werden. Bei solchen Sprüngen ändert sich nicht nur die Geschwindigkeit, sondern das Verhalten: Ein Entwicklungsserver, der nicht mehr wächst, läuft eben den ganzen Tag durch.

11:32 Eine Einordnung ist mir wichtig, damit Sie die Zahlen richtig lesen: Das sind Messungen des Herstellers an eigenen Anwendungen. Sie zeigen die Richtung verlässlich, Ihr Projekt wird andere Werte haben. Messen Sie einmal selbst, bevor und nachdem Sie aktualisieren. Zwei Punkte davon betreffen den Umstieg. Der Zwischenspeicher liegt lokal — ein frisch gestarteter Rechner in der Pipeline hat ihn nicht und baut erst einmal komplett.

11:57 Wer den Gewinn dort haben will, muss den Cache ausdrücklich zwischen den Läufen aufbewahren. Der zweite Punkt ist der wichtigere: Turbopack ist jetzt Standard, kein Zusatz. Wenn in Ihrem Projekt noch eine alte Bundler-Konfiguration liegt, greift sie nicht mehr. Das ist der typische Moment beim Update, in dem etwas scheinbar grundlos anders funktioniert — und wo die Suche schnell geht, wenn man diesen Zusammenhang kennt.

Projektstruktur und Konventionen

12:22 Jetzt zu einer Frage, an der sich in Projekten überraschend viel entscheidet: Wo legen Sie eigentlich was ab? Die meisten Teams beantworten das aus Gewohnheit und sortieren nach Dateityp, so wie sie es aus früheren Projekten kennen. Next.js gibt Ihnen dabei deutlich mehr Freiheit, als die meisten vermuten — und die wird regelmäßig nicht genutzt.

12:41 Wir sehen uns an, welche Dateinamen tatsächlich eine Adresse erzeugen und was daraus für Ihre Ordnerstruktur folgt. Der App Router arbeitet mit Dateikonventionen, und das Prinzip ist schnell erzählt. Bestimmte Dateinamen haben eine feste Bedeutung: Eine bestimmte Datei macht ein Verzeichnis zur Route, eine andere legt eine Hülle darum, eine dritte definiert einen Endpunkt.

13:03 Und jetzt kommt der Teil, den viele überlesen: Alles andere in diesem Verzeichnis erzeugt keine URL. Es ist wie ein Haus, in dem nur bestimmte Türen nach draußen führen. Alle übrigen Räume können Sie einrichten, wie Sie möchten — von außen sichtbar wird nichts davon. Diese Liste sollten Sie sich einprägen, aber nicht als Vokabelheft.

13:22 Sehen Sie sich die Struktur an: Für jede Ebene einer Route können Sie festlegen, wie sie aussieht, was während des Ladens erscheint und was bei einem Fehler passiert. Das ist der eigentliche Gewinn gegenüber früher — diese drei Dinge waren einmal Sache der Anwendung, jetzt sind sie Sache der Route. Eine Datei fällt aus dem Rahmen und ist deshalb erwähnenswert: Der Proxy liegt nicht im Routenordner, sondern im Wurzelverzeichnis.

13:47 Er hieß bis Next.js 16 Middleware, und wir kommen in Modul acht darauf zurück. Diese Freiheit wird erstaunlich selten genutzt. Die meisten Projekte sortieren weiterhin nach Dateityp: alle Komponenten dorthin, alle Hilfsfunktionen hierhin, alle Tests woandershin. Dabei dürfen Komponente, Hilfsfunktion und Test einfach neben ihrer Route liegen — ohne dass eine URL entsteht.

14:09 Der Unterschied zeigt sich beim Arbeiten: Statt in vier Ordnern zu suchen, öffnen Sie einen und finden alles, was zu diesem Feature gehört. Fachliche Nähe schlägt technische Sortierung. Und ein Ordner mit führendem Unterstrich bleibt garantiert aus dem Routing heraus, falls Sie ganz sichergehen wollen. Hier legen wir uns fest, und eine dieser Zeilen ist mehr als Ordnung.

14:31 Der Ordner für den Datenzugriff wird im Laufe des Seminars zur wichtigsten Struktur des ganzen Projekts: Dort landen alle Abfragen, dort werden Berechtigungen geprüft, und dort wird entschieden, welche Felder die Anwendung überhaupt verlassen. Merken Sie sich diese Trennung zwischen Zugriff und Darstellung — wir bauen sie in Modul neun richtig auf und stützen darauf in Modul elf die gesamte Sicherheit und in Modul zwölf einen guten Teil der Tests.

14:54 Was hier wie eine Ordnerfrage aussieht, ist eine Architekturentscheidung.

Die Entwicklungswerkzeuge

14:59 Zum Abschluss des Moduls schärfen wir die Werkzeuge. Das klingt nach Vorgeplänkel, das man auch überspringen könnte, entscheidet aber darüber, ob Fehler früh und billig auffallen oder spät und teuer. Next.js bringt dafür inzwischen mehr mit als einen Entwicklungsserver: Es zeigt Ihnen, was beim Rendern tatsächlich passiert, und meldet Probleme, die man sonst erst in Produktion bemerkt.

15:21 Sehen wir uns an, was das im Alltag bedeutet. Die Entwicklungswerkzeuge von Next.js zeigen Ihnen etwas, das man sonst nicht sehen kann: für jeden Teil einer Seite, ob er statisch ist, aus dem Cache kommt oder erst zur Laufzeit entsteht. Das ist ungefähr so nützlich wie eine Wärmebildkamera an einer Hauswand — die Wand sieht überall gleich aus, und trotzdem geht an einer Stelle die Energie verloren.

15:44 Noch hilfreicher ist die zweite Fähigkeit: Die Werkzeuge melden von sich aus Probleme, die man sonst erst in Produktion bemerkt, und schlagen gleich passende Korrekturen vor. Hier geht es weniger um Technik als um menschliches Verhalten. Eine Prüfung, die nur auf Ihrem Rechner läuft, ist eine Prüfung, die irgendwann bei niemandem mehr läuft — spätestens wenn es eilig wird.

16:06 Typprüfung und Linting sind schnell genug, um bei jeder Änderung mitzulaufen, also gehören sie dorthin, wo sie niemand vergessen kann. Meine Einschätzung dazu ist eindeutig: Qualitätssicherung, die auf Disziplin baut, ist keine. Sie muss Teil des Ablaufs sein, nicht Teil der guten Vorsätze. Wir kommen in Modul zwölf ausführlich darauf zurück.

16:26 Der erste Punkt ist der überraschendste und deshalb wichtig: Im Entwicklungsmodus ist das Vorabladen von Seiten abgeschaltet. Das bedeutet, dass Sie Navigationsprobleme lokal gar nicht sehen können — sie zeigen sich erst in Produktion, wo sie niemand mehr sucht. Genau diese Lücke schließen die Werkzeuge, über die wir in Modul drei sprechen.

16:46 Der zweite Punkt betrifft ein verbreitetes Missverständnis: Ein grüner Build ohne Typprüfung sagt wenig darüber aus, ob die Anwendung läuft. Er sagt nur, dass sich die Dateien zusammensetzen ließen. Diese Aufgabe hat einen kleinen Trick, und der ist der eigentliche Inhalt. Es genügt nicht, die Prüfungen einzurichten — Sie sollen einen Fehler einbauen und sehen, dass es tatsächlich knallt.

17:09 Denn eine Prüfung, die nie fehlgeschlagen ist, ist keine Prüfung, sondern eine Vermutung. Diese Denkweise begleitet uns durch das ganze Seminar und kommt im Testmodul in voller Breite wieder. Nehmen Sie etwas Harmloses als Fehler, eine unbenutzte Variable oder einen falschen Prop-Typ. Der Punkt ist nicht der Fehler, sondern die rote Ausgabe.

Modul 1 zusammengefasst

17:30 Halten wir fest, was Sie mitnehmen. Next.js ist kein React mit Zusatzpaketen, sondern ein anderes Modell — wer das akzeptiert, hat es leichter. Der Stand ist festgelegt, das Projekt läuft, und Sie wissen, welche Dateinamen eine URL erzeugen und welche nicht. Damit ist die Bühne bereitet. Im nächsten Modul sehen wir uns an, wie aus Ordnern tatsächlich Routen werden — und wir stoßen dabei auf eine Eigenschaft von Layouts, die harmlos wirkt und uns bis ins Sicherheitsmodul verfolgen wird.

17:58 Merken Sie sich das Wort Layout, wir kommen darauf zurück.