Das Cockpit soll umziehen, also braucht es erst einmal ein Zuhause. Ein Next.js-Projekt legst du nicht Datei für Datei an — ein Befehl erzeugt das komplette Grundgerüst, stellt ein paar Fragen und installiert alles Nötige. Danach steht ein Ordner auf deinem Rechner, in dem schon eine Seite läuft. Diese Lektion geht durch den Befehl und durch das, was er hinterlässt.
Ein Befehl, ein Grundgerüst
npx create-next-app@latest holt ein kleines Programm aus dem npm-Verzeichnis, führt es einmal
aus und wirft es danach weg — installiert wird nichts davon dauerhaft. Das Programm fragt dich
durch die Einstellungen und legt dann den Projektordner an.
Die Antworten für das Cockpit sind schnell erklärt. TypeScript: nein — für Version 1 ist
JavaScript die kürzere Strecke, umstellen kannst du später. Linter: ESLint — er meckert
über Fehler, bevor du sie im Browser siehst. React Compiler: nein — eine Optimierung, die
du zum Anfangen nicht brauchst. Tailwind: ja — die Stile stehen dann als
Klassen direkt im Markup, und Claude Code kommt damit gut zurecht. src/-Ordner: ja —
dein Code liegt gesammelt an einer Stelle, die Konfiguration daneben. App Router: ja — das
ist die Bauform, die die Server-Ebene aus der letzten Lektion mitbringt.
Enter führt aus · Tab vervollständigt den nächsten Befehl · Ausgaben gekürzt, Zeiten und Commit-Hash sind Beispielwerte
Nach dem Befehl liegt ein Ordner node_modules mit tausenden Dateien im Projekt. Was davon gehört ins Git-Repo?
Was danach wo liegt
Der Ordner enthält jetzt mehr Dateien, als du am Anfang brauchst. Interessant sind drei
Bereiche: src/app mit den Seiten, public mit allem, was unverändert ausgeliefert wird,
und die Konfigurationsdateien im Wurzelverzeichnis. Zwei Ordner fehlen noch — src/components
und src/lib legst du selbst an, sobald du das Cockpit auseinandernimmst.
Klapp dich durch den Baum — Einträge mit gepunkteter Unterstreichung erklären sich beim Antippen, mit den Pfeiltasten kommst du auch ohne Maus durch.
Die Trennung in app, components und lib ist keine Formsache. Wenn sich die Formel für den
Break-even-ROAS ändert, fasst du eine Datei an und nicht die Seite. Und du kannst kennzahlen.js
im Terminal mit node durchrechnen, ohne den Browser überhaupt zu öffnen.
Welche Datei ist wofür zuständig?
0 von 7 zugeordnet
Vom Ordner zur Adresse
Im App Router gibt es keine Liste, in der du Adressen einträgst. Der Pfad im Dateisystem ist
die Adresse. src/app/page.js ist die Startseite unter /. Willst du eine zweite Seite unter
/kampagnen, legst du den Ordner src/app/kampagnen/ an und darin eine page.js. Der
Ordnername ist die Adresse, page.js der Inhalt.
Der Name page.js ist dabei fest vergeben. Eine Datei mit einem anderen Namen im selben Ordner
wird nicht zur Seite — sie liegt einfach daneben und kann von page.js benutzt werden. Ebenso
fest sind layout.js für den Rahmen und route.js für einen Endpunkt, der JSON statt einer
Seite zurückgibt. Der Rest der Dateien ist deiner.
Das Cockpit soll eine zweite Seite unter /kampagnen bekommen. Wo legst du sie an?
Der Stand, auf dem du aufbaust
Zwei Befehle wirst du ab jetzt dauernd benutzen. npm run dev startet den Dev-Server auf
deinem Rechner: Er übersetzt beim Speichern neu und zeigt Fehler im Klartext im Browser.
npm run build erzeugt daraus die Fassung, die später beim Hoster läuft — schneller, dafür
ohne dieses Zurückmelden.
Der zweite Stand ist der in Git. Den ersten Commit hast du schon; ab jetzt kommt nach jeder Änderung, die läuft, einer dazu. Bevor du das Repo auf GitHub schiebst, ist eine Entscheidung zu treffen.
Damit ist der Umzug halb geschafft: Es gibt ein Projekt, eine Seite, eine Historie und die Server-Ebene aus der ersten Lektion. Was fehlt, ist der Inhalt. Als Nächstes zerlegst du das Cockpit in Bausteine — eine Karte je Kennzahl, eine Tabelle für die Kampagnen — und danach holst du die Zahlen über die API, mit dem Key an der Stelle, an die er gehört.
Häufige Fragen
Kann ich TypeScript später noch dazunehmen?
Ja. Sobald eine .ts- oder .tsx-Datei im Projekt liegt, richtet Next beim nächsten Start den Rest ein, und du kannst Datei für Datei umstellen. Für Version 1 spricht wenig dafür: Du willst rechnen und anzeigen, nicht Typen beschreiben.
Muss npm run dev laufen, damit andere das Cockpit sehen?
Nein, umgekehrt: Der Dev-Server läuft nur auf deinem Rechner unter localhost, sonst kommt niemand daran. Live geht die Seite erst, wenn ein Hoster das Projekt baut und ausliefert — das ist ein eigener Schritt und hat mit dem Dev-Server nichts zu tun.
npm run dev sagt, Port 3000 sei belegt. Kaputt?
Nein, da läuft schon etwas anderes auf diesem Port, oft ein vergessener Dev-Server aus einem anderen Projekt. Next weicht von allein auf 3001 aus und schreibt die Adresse in die Ausgabe. Einen festen Port bekommst du mit npm run dev -- -p 3005.
Ich habe mich bei einer der Fragen vertippt. Nochmal von vorne?
Am schnellsten ja: Ordner löschen, Befehl neu laufen lassen — es ist ja noch nichts drin, was dir gehört. Nachträglich ändern geht auch, ist aber je nach Antwort mehr Arbeit als die zwei Minuten Installation.