Get in, losers: We’re learning Coding!

Bevor der Vorhang aufgeht, brauchen wir das richtige Equipment. Wie in jedem 2000er Makeover-Film gilt: Ohne Setup kein Glow-Up. Ich hatte kein riesiges Budget, aber ich hatte ein System.

VS Code war mein Atelier. Der Ort, an dem aus abstrakten Zeilen plötzlich etwas Sichtbares wurde.

GitHub wurde mein Archiv. Wie der perfekt sortierte Kleiderschrank in Clueless: alles gespeichert, nichts geht verloren.

Vercel war die Premiere. Der Moment, in dem etwas, das nur auf meinem Laptop existierte, plötzlich für die ganze Welt online ging.

Und wenn mich die Regie doch einmal überfordert hat, gab es zum Glück KI. Mein digitaler Co-Regisseur. Ich stelle die Fragen, sie hilft beim Drehbuch, also beim Code, und zeigt mir, wo noch Fehler in der Szene sind, bevor sie jemand sieht. Denn jede Hauptrolle braucht ein gutes Team hinter der Kamera.

Am Anfang dachte ich, Websites bestehen einfach aus Seiten ... wie bei Magazinen. Klick hier, Klick da. Aber in Wahrheit baust du sie dir selbst zusammen. Stell dir dein Projekt als ein großes Mode-Imperium vor. Auf deinem Computer gibt es dafür drei strategische Haupt-Archive, die nebeneinander existieren:

page.tsx ist dein Event-Look. Die page.tsx ist das eigentliche Outfit für ein ganz bestimmtes Event. Wenn jemand deine About-Seite besucht, ist das wie eine Cocktail-Party. Die page.tsx bestimmt, was dort konkret getragen wird, also der Text, die Bilder, die Story. Ohne page.tsx wäre der Schrankraum leer. Man könnte zwar reingehen, aber es gäbe nichts zu sehen.

layout.tsx ist dein kleines Schwarzes. Das ist der Rahmen, der immer passt. Dein Signature-Schmuck, dein Parfüm, deine Aura. Es umschließt jede page.tsx. Egal auf welches Event du gehst, das Layout sorgt dafür, dass die Navigation und dein Stil immer konsistent bleiben.

[slug] ist ein Schnitt in vielen Farben. Das ist wie dein Lieblingskleid, das du in fünf verschiedenen Farben hast. Der Schnitt ist identisch, aber der Stoff, also der Inhalt, ist jedes Mal ein anderer. Perfekt für einen Blog. Einmal entworfen, unendlich oft mit neuen Stories befüllt.

Jede Seite deiner Website ist einfach ein Ordner plus eine Datei.

Am Anfang wirkt der Begriff Next.js wie etwas Riesiges und fast einschüchternd. Aber in Wahrheit ist es genau das Gegenteil. Next.js ist kein kompliziertes Monster, sondern einfach das System, das dir erlaubt, deine Website überhaupt so strukturiert aufzubauen.

Es ist wie das Modehaus selbst, das alles zusammenhält: deine Seiten, dein Layout, deine Inhalte und Logik.

Ohne Next.js wäre das alles nicht automatisch verbunden. Du müsstest jede Seite einzeln verlinken, die Navigation mühsam von Hand organisieren und die Struktur manuell bauen. Mit Next.js passiert genau das im Hintergrund für dich.

Noch einfacher gesagt: Du könntest eine Website auch ohne Next.js bauen, aber es wäre langsamer, komplizierter und weniger strukturiert. Next.js macht aus „Ich bastle irgendwas zusammen“ ein „Ich baue ein echtes System“.

Mini-Realness: Technisch ist Next.js ein Framework. Aber ganz ehrlich? Das musst du am Anfang nicht im Detail verstehen. Wichtiger ist: Du nutzt es bereits und Schritt für Schritt verstehst du mehr davon.

next.config.js ist die Hausordnung. Hier legst du die speziellen Regeln für dein Modehaus fest. Zum Beispiel, von welchen externen Quellen du Bilder importieren darfst oder welche speziellen Features aktiviert sind. Es ist das Regelwerk, nach dem Next.js spielt.