Menu
Coddy logo textTech
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: dateibasiertes Routing, verschachtelte Layouts, Server- und Client-Komponenten, Datenabruf, Lade- und Fehlerzustände sowie Server Actions - zum Abschluss ein komplettes Next.js-Projekt. Teil der React-Journey: Die Komponenten-Grundlagen, die du brauchst, sind direkt daneben, mit KI-Hinweisen, wenn du feststeckst, und einem kostenlosen Zertifikat am Ende.

MIT DEM LERNEN BEGINNEN(kostenlos)
Lehrplan ansehen

1,000+ codders eingeschrieben

47 Lektionen32 Aufgaben99 Quizfragen

  • Anfängerfreundlich
  • sparkles iconKI-gestützte Coding-Hilfe
  • hint iconPraktische, interaktive Lektionen
  • volume On iconAudio-Erzählung in jeder Lektion
  • quiz iconQuizfragen zum Wissenstest
  • certificate iconKostenloses Abschlusszertifikat

Lehrplan

1 Abschnitte1 Projekte47 Lektionen32 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 Lektionen32 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

    Client-seitige Navigation

    5 Lektionen515

    Projekt: Coddy Eats

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

Learn by Doing

Write real code, query databases, build websites, and master AI prompts. Our interactive lessons cover every skill modern developers need.

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
Input
"Alex"
Output
"Hello, Coddy! Alex"

Build Your Coding Streak

Stay consistent and watch your progress grow! Track your daily coding habit, protect your streak with freeze days, and earn rewards for showing up every day.

12 days streak

Return tomorrow to keep your streak!

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

Double or Nothing

Day 5 of 7

fire Freeze icon

Streak Freeze

2 left

Code Anywhere, Anytime

Take your coding journey on the go! No setup, no downloads - just open and start coding. Available on iOS, Android and Web with 4.9 star ratings.

Python
7Streak
250Score
5Energy
Variables
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
CONTINUE
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
Journey
Goals
Leaderboard
Profile
4.9
StarStarStarStarStar
Rating

You're Not Alone in This

Compete on global leaderboards, invite friends to earn rewards, and celebrate each other's wins. Coding is better with friends!

Challenger League
Challenger LeagueTop 7 advance
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 iconPromotion zoneleaderboard Arrow Up icon

Every way to learn

Read, listen, test yourself, ask the AI, or look up anything you've already covered. Every lesson meets you where you are.

Intro to Variables
Audio

A variable is a named container that stores a value you can reference later in your program.

In Python, you create one by writing the name, an equals sign, then the value you want to store.

The value can change over time - reassigning the name simply points it to a new value.

1xSarah

Prove Your Skills

Earn certificates for every course you complete. Add them to your LinkedIn profile and resume to showcase your coding expertise to employers.

CoddyCertificate of Completion
This certifies thatJohn Doehas successfully completed
PythonPython Fundamentals
Verified
DateJan 2026
LinkedInAdd to LinkedIn

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.
Coddy programming languages illustration

Learn Next.js Essentials with Coddy

LOS GEHT'S