Roadmap Développeur Next.js : 4 lignes, 20 stations, 1 destination

Next.js est devenu l'un des frameworks les plus demandés en 2026. Tu ouvres LinkedIn, tu scrolles trois minutes, tu vois passer dix offres qui mentionnent ce framework. Tu te dis qu'il faut s'y mettre.

Toi, tu as déjà essayé. Tu as lu trois articles, regardé une vidéo YouTube de deux heures, peut-être lancé un projet qui s'est arrêté à la troisième route. Tu sens qu'il manque une vue d'ensemble.

Le problème n'est pas le manque de tutoriels. C'est l'inverse. Trop de ressources, aucune ne te dit dans quel ordre les choses s'imbriquent. Tu sautes de Server Components à Tailwind, de Prisma à Vercel, sans jamais voir le plan d'ensemble.

Cet article propose une roadmap sous forme de carte de métro. Quatre lignes thématiques, vingt stations au total, un terminus commun : être embauché ou capable de livrer un vrai projet client. Si tu es en reconversion, développeur junior ou curieux qui veut comprendre où va le web moderne, tu devrais y trouver de quoi te repérer.

Pourquoi une carte de métro plutôt qu'une liste

Les roadmaps qu'on voit partout sont des listes à cocher. Étape 1, étape 2, étape 3. Le problème, c'est que l'apprentissage du web ne marche pas comme ça. Tu n'apprends pas TypeScript après JavaScript pour ranger TypeScript dans un placard. Tu vas y revenir tout le temps.

Une carte de métro raconte autre chose. Elle montre des lignes parallèles qui se croisent à des stations clés. Tu peux prendre une ligne, t'arrêter, changer de ligne, revenir. C'est exactement ce que tu fais en réalité quand tu apprends.

Quatre lignes ici : Fondations (le web de base), Framework (React et Next.js), Données (tout ce qui touche au serveur), Production (mise en ligne et qualité). Deux stations de correspondance majeures, TypeScript et Next.js, où plusieurs lignes se rejoignent. Et un terminus : Job.

Ligne verte : les Fondations

Cinq stations : HTML, CSS, Git, JavaScript, TypeScript. C'est la ligne que tout le monde veut sauter. C'est aussi celle qui sépare ceux qui progressent de ceux qui restent bloqués.

HTML et CSS

Comprendre la structure d'une page et son habillage. Pas besoin d'être un designer, mais tu dois savoir ce qu'est une balise sémantique, comment fonctionne le flux, ce que fait Flexbox et Grid. Tailwind viendra plus tard, et il sera infiniment plus simple si tu maîtrises déjà CSS pur.

Git

Versionner ton code n'est pas optionnel. Branches, commits, merge, rebase, résolution de conflits. Un développeur qui ne maîtrise pas Git est un développeur qui perd son travail un jour ou l'autre. Si tu débutes, regarde la formation Git et GitHub pour débutants.

JavaScript

Le langage qui fait tourner React et Next.js. Tu dois être à l'aise avec les fonctions, les tableaux, les objets, la programmation asynchrone, les promesses, fetch, les modules. Pas besoin de tout connaître par cœur, mais tu dois savoir lire et écrire du code moderne sans paniquer. La formation JavaScript fondamentaux couvre l'essentiel.

TypeScript

Première station de correspondance. En 2026, presque tous les projets Next.js sérieux utilisent TypeScript. Ce n'est plus un bonus, c'est le standard. Tu vas y revenir tout au long de ta carrière. Type les props, les retours de fonction, les schémas de base de données. Pour franchir cette station, regarde la formation TypeScript pour développeurs JavaScript.

Ligne orange : le Framework

Cinq stations : React, Next.js, Routing, Tailwind, shadcn/ui. C'est la ligne qui te transforme de quelqu'un qui sait coder en quelqu'un qui sait construire une application.

React

Avant Next.js, il y a React. Composants, props, state, hooks. Comprends bien useState, useEffect, useContext avant de t'attaquer au reste. Beaucoup de gens veulent apprendre Next.js sans connaître React, et finissent perdus à la première erreur. La formation React te donne les bases solides.

Next.js

Deuxième station de correspondance. C'est le cœur du réseau. Tu y apprends l'App Router, les Server Components, les Client Components, les Server Actions. Le changement de paradigme par rapport à React pur est important : par défaut, ton code tourne sur le serveur, pas dans le navigateur. Voir la formation Next.js.

Routing

L'App Router de Next.js fonctionne par convention de fichiers. Un dossier app/dashboard avec un fichier page.tsx crée la route /dashboard. Tu apprends les layouts partagés, les loading states, les error boundaries, les routes dynamiques. C'est une station courte mais qu'il faut bien comprendre, sinon tu vas réinventer la roue dans chaque projet.

Tailwind

Le standard de fait pour styliser les applications Next.js. Au lieu d'écrire du CSS dans des fichiers séparés, tu écris des classes utilitaires directement dans ton JSX. La courbe d'apprentissage est rapide si tu maîtrises CSS. Sinon, retourne à la station CSS de la ligne verte.

shadcn/ui

Pas une librairie au sens classique. C'est une collection de composants que tu copies directement dans ton projet. Boutons, dialogues, formulaires, tables, navigation. Tu les modifies à ta guise. C'est devenu incontournable dans les projets Next.js modernes parce que ça te donne du beau code sans dépendance qui te bloque.

Ligne crème : les Données

Cinq stations : Server Actions, Caching, Auth.js, Prisma, PostgreSQL. C'est la ligne qui change la donne. Avec Next.js, tu fais du backend sans t'en rendre compte. La frontière frontend/backend devient floue, et c'est tant mieux.

Server Actions

Une fonction côté serveur que tu appelles depuis un formulaire ou un bouton. Pas besoin de créer une API REST à part, pas besoin de fetch. Tu écris une fonction marquée "use server", tu l'appelles depuis ton composant. C'est l'une des fonctionnalités qui rendent Next.js si productif aujourd'hui.

Caching

Next.js met en cache agressivement. Le rendu statique, le cache des fetch, les pages, les routes. C'est puissant, mais ça peut te jouer des tours. Tu modifies une donnée et elle n'apparaît pas. Comprendre revalidatePath, revalidateTag, et les options de fetch, c'est ce qui sépare un projet jouet d'un projet en production.

Auth.js

Anciennement NextAuth. Gestion des sessions, login par email, OAuth (Google, GitHub), magic links, protection des routes. C'est le standard pour l'authentification dans les projets Next.js. Tu peux aussi regarder Clerk ou Lucia selon tes besoins, mais Auth.js reste la valeur par défaut.

Prisma

Un ORM (Object Relational Mapper) qui te permet de parler à ta base de données avec du TypeScript typé. Tu définis un schéma, tu génères un client, tu fais des requêtes propres et auto-complétées. Drizzle est une alternative qui monte, mais Prisma reste le plus utilisé dans les offres d'emploi.

PostgreSQL

Le terminus de la ligne crème. Une vraie base de données relationnelle. Hébergée chez Neon, Supabase, Railway, ou installée localement. Tu n'as pas besoin d'être DBA, mais tu dois savoir ce qu'est une migration, un index, une clé étrangère, une transaction. Quand tu touches à PostgreSQL, tu n'es plus seulement un dev frontend. Tu fais du fullstack, même si ton intitulé de poste dit autre chose.

Ligne bleue : la Production

Quatre stations : Tests, Performance, Vercel, SEO. Plus le terminus Job. C'est la ligne qui transforme ton projet en application qui tient la route devant de vrais utilisateurs.

Tests

Vitest pour les tests unitaires, Playwright pour les tests end-to-end. Tu n'as pas besoin de tout tester. Mais si tu veux travailler dans une équipe pro, tu dois savoir écrire un test qui vérifie qu'un formulaire fonctionne ou qu'une fonction renvoie ce qu'elle doit renvoyer.

Performance

Next.js a Image et Font optimization intégrés. Le streaming avec Suspense, le lazy loading, le code splitting. Tu apprends à lire les Core Web Vitals : LCP, FID, CLS. Une page lente, c'est une page que les gens quittent. Et c'est aussi une page que Google déclasse.

Vercel

L'hébergeur officiel de Next.js. Tu connectes ton repo GitHub, tu pousses, c'est en ligne. Variables d'environnement, preview deployments, logs en temps réel. Tu peux héberger ailleurs (Cloudflare Pages, Netlify, ton propre VPS), mais Vercel reste l'option la plus rapide pour démarrer.

SEO

Métadonnées dynamiques, sitemap.xml, robots.txt, données structurées. Next.js a un système de metadata API très propre. Si tu veux que ton site soit trouvé sur Google, c'est cette station qu'il faut visiter.

Terminus : Job

Le terminus n'est pas une station technique. C'est l'objectif. Pour y arriver, il te faut un portfolio avec deux ou trois projets finis. Pas quinze projets à moitié faits, comme on en voit trop souvent. Si tu cherches comment construire ton portfolio, lis comment construire un portfolio de développeur sans client.

Exemples de parcours selon ton profil

La beauté d'une carte de métro, c'est qu'il y a plusieurs façons d'aller au terminus. Voici trois parcours que je vois souvent.

Reconversion totale (6 à 9 mois)

Tu pars de zéro. Tu prends la ligne verte de bout en bout pendant 3 mois. Puis tu attaques React et Next.js sur les 2 mois suivants. Tu construis un premier projet simple (todo list, blog perso). Tu ajoutes Auth.js et Prisma sur le 6ème mois. Tu déploies, tu fais ton portfolio, tu cherches un premier poste de junior.

Développeur backend qui veut faire du fullstack (2 à 3 mois)

Tu connais déjà SQL, l'auth, les API. Tu sautes directement à React, puis Next.js. Tu apprends Tailwind et shadcn/ui pour ne pas avoir à designer. Tu utilises Prisma pour parler à ta base habituelle. En deux mois, tu peux livrer une application Next.js complète.

Développeur frontend qui veut élargir (3 à 4 mois)

Tu connais HTML, CSS, JS, peut-être React. Tu attaques TypeScript si tu ne l'as pas. Puis Next.js. Puis la ligne crème : Server Actions, Prisma, PostgreSQL, Auth.js. C'est le passage le plus formateur. Tu vas découvrir ce que signifie développer une application complète.

Les pièges à éviter

Une roadmap ne vaut rien si tu fais les erreurs classiques qui font dérailler le parcours. Voici les principales que je vois chez les gens qui m'écrivent.

Vouloir sauter les fondations

Tu te dis "JavaScript, je verrai au fur et à mesure". Tu vas passer trois mois à galérer sur des erreurs que tu aurais comprises en deux jours avec les bases. Pareil pour Git. Une formation accélérée sur Git rapporte plus que dix heures de tutoriels Next.js.

Apprendre par accumulation de tutoriels

Tu regardes des vidéos, tu prends des notes, tu fais des fiches. Et tu n'écris jamais de code seul. Le seul vrai apprentissage en dev passe par les mains sur le clavier. Trois projets bien finis valent mieux que quinze cours suivis.

Vouloir tout configurer à la main

Au début, utilise create-next-app, prends shadcn/ui tel quel, déploie sur Vercel sans te poser de questions. Tu auras tout le temps de configurer ton propre stack quand tu maîtriseras les bases. Sinon, tu passes plus de temps à régler ton outillage qu'à coder.

Confondre rapide et solide

Avec l'aide d'une IA, tu peux générer une application Next.js en quelques heures. Mais si tu ne comprends pas le code, tu ne pourras ni le débugger, ni l'expliquer en entretien, ni le faire évoluer. L'IA accélère, elle ne remplace pas l'apprentissage. Les recruteurs le voient en cinq minutes d'entretien.

Combien de temps faut-il pour faire le tour

Pas de réponse universelle. Mais voici un repère honnête : un débutant complet qui s'investit sérieusement (15 à 20 heures par semaine de pratique) peut atteindre un niveau "junior employable" en 6 à 9 mois. Si tu as déjà un bagage en programmation, compte 2 à 4 mois.

Le piège, c'est de penser que tu dois maîtriser toutes les stations avant de postuler. Faux. Tu dois avoir traversé la ligne verte et la ligne orange, avoir touché à la ligne crème, et avoir déployé au moins un projet. Le reste s'apprend en poste.

Pour aller plus loin sur la dimension fullstack de Next.js, regarde aussi la formation Fullstack avec Next.js, qui couvre API Routes et base de données dans le même framework.

Questions fréquentes

La roadmap n'est pas un parcours linéaire. C'est un plan de métro. Tu peux changer de ligne, faire des allers-retours, t'arrêter et repartir. Ce qui compte, c'est de garder le terminus en tête et de ne pas s'éparpiller en route.

Trois projets bien finis valent mieux que quinze à moitié.

Pour aller plus loin, jette un œil à les 10 erreurs qui font fuir les recruteurs tech chez les juniors et à les soft skills du développeur moderne.