Menu
CoddyTech
JETZT LERNEN
flag De iconDeutschdown icon
react iconTeil der React-JourneyNeuJourney

Next.js lernen

Ein kostenloser, interaktiver Next.js-Kurs, der dich von React-Komponenten zu einer echten App führt: Routing, Layouts, Server- und Client-Komponenten, Datenabruf und Server Actions. KI-Hinweise helfen, wenn du feststeckst, und zum Abschluss gibt es ein kostenloses Zertifikat.

MIT DEM LERNEN BEGINNEN(kostenlos)
Lehrplan ansehenNext.js Essentials-Playground

2,333+ codders eingeschrieben

47 Lektionen41 Aufgaben99 Quizfragen

  • Anfängerfreundlich
  • sparkles iconKI-gestützte Coding-Hilfe
  • hint iconPraktische, interaktive Lektionen
  • quiz iconQuizfragen zum Wissenstest
  • certificate iconKostenloses Abschlusszertifikat

Lehrplan

1 Abschnitte1 Projekte47 Lektionen41 Aufgaben99 Quizfragen

Dieser Abschnitt ist Teil der React-Journey. Der vollständige Lehrplan enthält weitere Abschnitte - klicke unten auf eine Vorschau, um sie auf der Journey-Seite anzusehen.

  1. Abschnitt 1Grundlagen42 Lektionen
  2. Abschnitt 2

    Next.js Essentials

    Abschnitt startenStartenAusklappenEinklappen    Gehe von React-Komponenten zu einer echten App über: Dateisystem-basiertes Routing, Layouts, Server- und Client-Komponenten, Data Fetching, Server Actions und ein komplettes Next.js-Projekt.47 Lektionen41 Aufgaben99 Fragen1 Projekt

    Warum Next.js?

    4 Lektionen39

    Routing & Links

    6 Lektionen516

    Layouts & Metadaten

    6 Lektionen515

    Server & Client

    6 Lektionen515

    Daten auf dem Server

    6 Lektionen516

    Server Actions

    5 Lektionen413

    Clientseitige Navigation

    5 Lektionen515

    Projekt: Coddy Eats

    Projekt9 Lektionen9
Den vollständigen Lehrplan der React-Journey ansehen
Das bekommst du
Alles, was du zum Programmierenlernen nutzt

Lernen durch Tun

Schreibe echten Code, frage Datenbanken ab, erstelle Websites und meistere KI-Prompts. Unsere interaktiven Lektionen decken alle Fähigkeiten ab, die moderne Entwickler brauchen.

playground.js
Code-Editor
1const greeting = "Hello, Coddy!"
2function sayHi(name) {
3    return greeting + " " + name
4}
5
bottombar Collapse icon
Test #1test Case Success icon
Test #2test Case Success icon
Test #3test Case Failure icon
Eingabe
"Alex"
Ausgabe
"Hello, Coddy! Alex"

Baue deine Serie auf

Bleib konsequent und sieh zu, wie dein Fortschritt wächst! Verfolge deine tägliche Programmiergewohnheit, schütze deine Serie mit Einfrieroptionen und verdiene Belohnungen für jeden Tag.

12 Tage Serie

Komm morgen zurück, um deine Serie zu halten!

fire Filled icon
left icon

January 2026

right icon

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

21

22

23

24

25

26

27

28

29

30

product Double Or Nothing icon

Doppelt oder Nichts

Tag 5 von 7

fire Freeze icon

Serie Einfrieren

2 left

Überall coden

Nimm deine Programmierreise mit! Keine Einrichtung, keine Downloads: einfach öffnen und loslegen. Verfügbar auf iOS, Android und Web mit 4,9-Sterne-Bewertungen.

Python
7Streak
250Punkte
5Energie
Variablen
journey Hex Done Base iconjourney Hex Done Shadow iconjourney Hex Done Top iconjourney Lesson Done icon
journey Path Right Done icon
journey Hex Done Base iconjourney Hex Done Shadow iconjourney Hex Done Top iconjourney Lesson Done icon
journey Path Left Done icon
journey Hex Active Base iconjourney Hex Active Shadow iconjourney Hex Active Top iconjourney Lesson Theory Challenge icon
FORTSETZEN
journey Path Right icon
journey Hex Locked Base iconjourney Hex Locked Shadow iconjourney Hex Locked Top iconjourney Lesson Theory Challenge icon
journey Path Left icon
journey Hex Locked Base iconjourney Hex Locked Shadow iconjourney Hex Locked Top iconjourney Lesson All icon
Reise
Ziele
Bestenliste
Profil
4.9
SternSternSternSternStern
Bewertung

Du bist nicht allein

Tritt auf globalen Bestenlisten an, lade Freunde ein, um Belohnungen zu verdienen, und feiert gemeinsam eure Erfolge. Programmieren macht mit Freunden mehr Spaß!

Herausforderer-Liga
Herausforderer-LigaTop 7 steigen auf
leaderboard First icon1
avatar 1 icon
fire Filled icon
Alex7+ Days
2840
leaderboard Second icon2
avatar 2 icon
fire Filled icon
Jordan7+ Days
2650
leaderboard Third icon3
avatar 3 icon
fire Filled icon
Sam7+ Days
2420
4
avatar 4 icon
Casey
2180
5
avatar placeholder icon
fire Filled icon
Morgan7+ Days
1950
leaderboard Arrow Up iconAufstiegszoneleaderboard Arrow Up icon

Jeder Lernweg, alles dabei

Lies, höre, teste dich, frag die KI oder schlage nach, was du schon gelernt hast. Jede Lektion passt sich dir an.

Einführung in Variablen
Audio

Eine Variable ist ein benannter Container, der einen Wert speichert, auf den du später im Programm verweisen kannst.

In Python erstellst du eine, indem du den Namen, ein Gleichheitszeichen und dann den Wert schreibst.

Der Wert kann sich ändern - eine neue Zuweisung verweist den Namen einfach auf einen neuen Wert.

1xSarah

Werde zertifiziert

Verdiene Zertifikate für jeden abgeschlossenen Kurs. Füge sie deinem LinkedIn-Profil und Lebenslauf hinzu, um Arbeitgebern deine Programmierkenntnisse zu zeigen.

CoddyAbschlusszertifikat
Hiermit wird bestätigt, dassMax Mustermannerfolgreich abgeschlossen hat
python iconPython-Grundlagen
Verifiziert
DatumJan. 2026
LinkedInZu LinkedIn hinzufügen

Warum Next.js mit Coddy lernen

  • Baue Next.js-Apps im Browser. Keine Node-Installation, kein create-next-app, keine Konfiguration - jede Lektion liefert ein echtes app-Verzeichnis mit Layout, Seiten und Komponenten zum Bearbeiten.
  • Der App Router, wie er in Produktion genutzt wird: Ordner als Routen, dynamische Segmente, verschachtelte Layouts, Server- vs. Client-Komponenten, Datenabruf, Lade- und Fehlerzustände sowie Formulare mit Server Actions.
  • KI-Hinweise, die deinen tatsächlichen Code lesen. Wenn eine Route 404 liefert oder eine Server-Komponente bricht, bekommst du einen Stups, der auf das Problem zeigt, ohne die Antwort zu verraten.
  • Ein kostenloses Zertifikat zum Abschluss des Abschnitts - Next.js ist das gefragteste React-Framework und steht in modernen Frontend-Stellenanzeigen direkt neben React.

Häufige Fragen zum Next.js-Lernen

Was ist Next.js?

Next.js ist ein React-Framework für vollständige Webanwendungen. React liefert die Komponenten; Next.js ergänzt alles drumherum - dateibasiertes Routing, verschachtelte Layouts, serverseitiges Rendering, Datenabruf und Server Actions für Formulare und Mutationen. Es wird von Vercel entwickelt und gepflegt und ist das in Produktion meistgenutzte React-Framework.

Muss ich React können, bevor ich Next.js lerne?

Ja - Next.js baut auf React auf, Komponenten, Props und State sollten dir also zuerst vertraut sein. Dieser Abschnitt ist der zweite Teil der React-Journey: Der Grundlagen-Abschnitt davor behandelt genau dieses Fundament, du kannst also einfach der Reihe nach durchgehen.

Behandelt der Kurs den App Router?

Ja - der Abschnitt ist um den modernen App Router herum aufgebaut: das app-Verzeichnis, Ordner als Routen, dynamische Routen-Segmente, verschachtelte Layouts und das Server/Client-Komponentenmodell. Das ist die Architektur, die neue Next.js-Projekte standardmäßig verwenden und die aktuelle Stellenanzeigen erwarten.

Was ist der Unterschied zwischen Server- und Client-Komponenten?

Server-Komponenten werden auf dem Server gerendert - sie können Daten direkt abrufen und schicken weniger JavaScript an den Browser. Client-Komponenten laufen im Browser und übernehmen die Interaktivität: State, Events, Effekte. Next.js-Apps mischen beide, und zu wissen, wann welche passt, ist eine der Kernfähigkeiten, die dieser Abschnitt trainiert.

Kann ich Next.js online kostenlos lernen?

Ja. Der interaktive Next.js-Abschnitt ist kostenlos - vollständige Lektionen, echte Code-Challenges mit sofortigem Feedback und KI-Hinweise. Alles läuft im Browser, du musst also weder Node installieren noch ein Projekt aufsetzen, um zu starten.

Bekomme ich nach dem Next.js-Kurs ein Zertifikat?

Ja. Zum Abschluss des Abschnitts erhältst du ein kostenloses Zertifikat, das du auf LinkedIn teilen oder in deinen Lebenslauf aufnehmen kannst - zusammen mit dem kompletten Next.js-Projekt, das du in den letzten Kapiteln baust.

Lernpfade, die diesen Kurs enthalten

Dieser Kurs ist ein Schritt eines längeren Pfads: mehrere Kurse in der Reihenfolge, in der ein Mentor sie unterrichten würde, jeder mit eigenem kostenlosem Zertifikat.

Illustration der Programmiersprachen bei Coddy

Lerne Next.js Essentials mit Coddy

LOS GEHT'S