Menu
Coddy logo textTech
COMMENCER À APPRENDRE
flag Fr iconFrançaisdown icon
react iconFait partie du Journey ReactNouveauParcours

Apprendre Next.js

Un cours Next.js gratuit et interactif qui vous mène des composants React à une vraie application : routage par système de fichiers, layouts imbriqués, composants serveur et client, récupération de données, états de chargement et d'erreur, et server actions - avec en final un projet Next.js complet. Il fait partie du parcours React : les fondamentaux des composants dont vous avez besoin sont juste à côté, avec des indices IA quand vous bloquez et un certificat gratuit à la fin.

COMMENCER À APPRENDRE(c'est gratuit)
Voir le programme

1,000+ codders inscrits

47 leçons32 défis99 questions de quiz

  • Adapté aux débutants
  • sparkles iconAide au codage assistée par IA
  • hint iconLeçons interactives et pratiques
  • volume On iconNarration audio dans chaque leçon
  • quiz iconQuiz pour tester vos connaissances
  • certificate iconCertificat gratuit de réussite

Programme

1 sections1 projets47 leçons32 défis99 questions de quiz

Cette section fait partie du Journey React. Le programme complet contient d'autres sections - clique sur n'importe quel aperçu ci-dessous pour le voir sur la page du Journey.

  1. Section 1Les fondamentaux42 leçons
  2. Section 2

    L'essentiel de Next.js

    Commencer la sectionDémarrerDévelopperRéduire    Passez des composants React à une véritable application : routage basé sur le système de fichiers, layouts, composants serveur et client, récupération de données, server actions et un projet Next.js complet.47 leçons32 défis99 questions1 projet

    Pourquoi Next.js

    4 leçons39

    Routage et liens

    6 leçons516

    Mises en page et métadonnées

    6 leçons515

    Serveur & Client

    6 leçons515

    Données sur le serveur

    6 leçons516

    Server Actions

    5 leçons413

    Navigation côté client

    5 leçons515

    Projet : Coddy Eats

    Projet9 leçons
Voir le programme complet du Journey React
Ce que vous obtenez
Tout ce que vous utiliserez pour apprendre à coder

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

Pourquoi apprendre Next.js avec Coddy

  • Construisez des applis Next.js dans votre navigateur. Pas d'installation de Node, pas de create-next-app, pas de config : chaque leçon vous donne un vrai répertoire app avec layout, pages et composants à modifier.
  • L'App Router tel qu'il s'utilise en production : dossiers comme routes, segments dynamiques, layouts imbriqués, composants serveur vs client, récupération de données, états de chargement et d'erreur, formulaires avec server actions.
  • Des indices IA qui lisent votre vrai code. Quand une route renvoie 404 ou qu'un composant serveur casse, vous recevez un coup de pouce qui pointe le problème sans donner la réponse.
  • Un certificat gratuit à la fin de la section - Next.js est le framework React le plus demandé, celui que les offres frontend modernes exigent aux côtés de React lui-même.

Questions fréquentes sur l'apprentissage de Next.js

Qu'est-ce que Next.js ?

Next.js est un framework React pour construire des applications web complètes. React fournit les composants ; Next.js ajoute tout ce qui les entoure : routage par système de fichiers, layouts imbriqués, rendu côté serveur, récupération de données et server actions pour gérer formulaires et mutations. Développé et maintenu par Vercel, c'est le framework React le plus utilisé en production.

Faut-il connaître React avant d'apprendre Next.js ?

Oui : Next.js est construit sur React, donc composants, props et state doivent d'abord vous être familiers. Cette section est la deuxième partie du parcours React : la section Fondamentaux qui la précède couvre exactement ces bases, vous pouvez donc suivre le parcours dans l'ordre.

Le cours couvre-t-il l'App Router ?

Oui : la section est bâtie autour de l'App Router moderne - le répertoire app, les dossiers comme routes, les segments de route dynamiques, les layouts imbriqués et le modèle composants serveur/client. C'est l'architecture par défaut des nouveaux projets Next.js et ce qu'attendent les offres d'emploi actuelles.

Quelle est la différence entre composants serveur et composants client ?

Les composants serveur sont rendus sur le serveur : ils peuvent récupérer des données directement et envoient moins de JavaScript au navigateur. Les composants client s'exécutent dans le navigateur et gèrent l'interactivité : state, événements, effets. Les applis Next.js mélangent les deux, et savoir lequel choisir est l'une des compétences clés que cette section fait travailler.

Peut-on apprendre Next.js en ligne gratuitement ?

Oui. La section interactive Next.js est gratuite : leçons complètes, vrais défis de code avec retour instantané et indices IA. Tout s'exécute dans votre navigateur, inutile d'installer Node ou de créer un projet pour commencer.

Ai-je un certificat à la fin du cours Next.js ?

Oui. En terminant la section, vous obtenez un certificat gratuit à partager sur LinkedIn ou à ajouter à votre CV - avec en plus le projet Next.js complet que vous construisez dans les derniers chapitres.
Coddy programming languages illustration

Learn L'essentiel de Next.js with Coddy

COMMENCER