Vous aimez ? Vous avez des suggestions ? Dites-le nous sur Discord !

Aide

✨ Nouvelle version

Vous aimez ? Vous avez des suggestions ? Dites-le nous sur Discord !

‌

Aide

‌

Formation Apprendre NextJS 15 en 2025

Name: Formation Apprendre NextJS 15 en 2025
Price: 70 EUR
Availability: InStock

Découvrez comment créer des sites internet plus rapidement et facilement, de manière full-stack et avec une SEO optimisée à la perfection pour les moteurs de recherche avec NextJS 15

Tous les niveaux

50 heures

4.9 / 5

154 avis

1 597 apprenants

Présentation

Bienvenue dans notre formation exclusive sur le développement web avec Next.js 15, mettant en vedette la toute dernière version du framework et utilisant le puissant routeur "app" pour l'ensemble de la formation et des projets.

Plongez dans le monde fascinant de la création de sites internet full-stack et de l'optimisation SEO tout en exploitant les fonctionnalités innovantes de Next.js 15.

Au cours de cette formation, nous mettons l'accent sur l'utilisation du tout nouveau routeur "app" sans oublier quelques rappels sur l'ancien routeur "pages". Vous apprendrez à exploiter pleinement ces deux fonctionnalités afin de vous adapter à toutes les situations possibles.

Le projet principal de cette formation sera la création d'un clone de Threads, vous permettant d'appliquer les concepts enseignés de manière pratique. Vous serez guidé étape par étape à travers le processus de développement, en utilisant les meilleures pratiques de Next.js 15 et en mettant en œuvre le routeur "app" pour garantir une navigation optimale et une structure de projet bien organisée.

De plus, notre formation mettra en lumière les techniques essentielles pour optimiser votre site en termes de référencement (SEO), assurant ainsi une visibilité maximale sur les moteurs de recherche. Avec une combinaison de compétences full-stack et d'expertise en SEO, vous serez prêt à créer des sites internet de haute qualité et performants.

Ne manquez pas cette opportunité de créer des projets web exceptionnels avec la technologie la plus avancée du moment !

Voici ce que vous allez réaliser

Projet 1

Plan de la formation

Partie 1

Avant de commencer

Avant de commencer cette formation sur NextJS, nous prenons notre temps pour découvrir les éventuels prérequis et nous apprenons ensemble à trouver rapidement des réponses à nos questions.

Qu'allons-nous faire dans cette formation ?

Prérequis

Comment réussir cette formation ?

Comment poser mes questions ?

Commencez la formation selon votre niveau

Partie 2

Quiz interactif

Challenge : 1 question

Question

Partie 3

Partons sur de bonnes bases

Commençons par la base de NextJS en découvrant son fonctionnement. C'est dans cette partie que nous installons les logiciels que nous allons utiliser dans la formation ainsi que les extensions de notre éditeur de code.

Comment fonctionne NextJS ?

Quels logiciels utiliser ?

Quelles extensions installer ?

Partie 4

Quiz interactif

Challenge : 1 question

Question

Partie 5

Quelques rappels sur React

Avant de se lancer dans l'apprentissage de NextJS, il faut faire quelques rappels ! Ici, nous revoyons ensemble la base de React ainsi que ses dernières nouveautés pour faire en sorte de partir sur un socle durable pour toute la formation.

Ce module est-il nécessaire pour vous ?

Comment fonctionne React ?

Créer un nouveau projet React

Découvrons les fichiers générés

React et les composants

React et le style

React et les props

Le mode strict

Détecter les événements

React et le state (avec les React Hooks)

Les formulaires

Utiliser le hook "useEffect"

Nous sommes prêts pour NextJS !

Partie 6

Quiz interactif

Challenge : 1 question

Question

Partie 7

Créer un site avec plusieurs pages (le router avec "Pages")

Pour devenir un excellent développeur NextJS, il faut pouvoir comprendre comment fonctionnent les deux routeurs du framework : pages et app. Ici, on se consacre à l'ancien routeur, pages. Nous aborderons le routeur app dans la prochaine partie.

Créons notre premier projet

Découvrons les fichiers et les dossiers générés

Qu'est-ce qu'un routeur et comment fonctionne-t-il avec NextJS ?

Ajoutons une seconde page (la page "À Propos")

La particularité des pages gérées par NextJS

Comment créer une page imbriquée ?

Créer des pages dynamiques

Récupérer les valeurs d'une page dynamique

Créer des pages qui "attrapent" toutes les urls

Naviguer entre les pages sans provoquer de rechargement (Link)

Naviguer sur les pages dynamiques

Une autre façon de définir nos liens

Naviguer de manière programmatique (après une action par exemple)

Faire une page d'erreur 404

Partie 8

Quiz interactif

Challenge : 1 question

Question

Partie 9

Créer un site avec plusieurs pages (le router avec "App")

C'est dans cette partie que nous découvrons le routeur app de NextJS : c'est le routeur conseillé par l'équipe derrière le framework, et nous allons maîtriser tout ce qu'il faut sur son sujet !

La formation est en train d'être mise à jour avec NextJS 15

Créer un projet avec le routeur App

Créer une nouvelle page "À Propos" avec le dossier "app" de NextJS

Pourquoi se compliquer la vie avec des pages "page.jsx" pour chaque adresse ?

Comprendre le fichier "layout.jsx"

Naviguer entre les pages (Link)

Créer un composant "Header"

Les noms réservés par Next

Utiliser le raccourci "@" sur nos imports

Créer une url dynamique

Extraire les paramètres de l'url

Créer une url qui récupère plusieurs paramètres

Gérer les pages non trouvables (404)

Partie 10

Quiz interactif

Challenge : 1 question

Question

Partie 11

Diffuser des composants en continu avec les React Server Components

Les "React Server Components" sont l'une des dernières nouveautés proposées par React : nous apprenons à les utiliser grâce à NextJS.

Qu'est-ce que la "diffusion des composants en continu" ?

Les "Server Components" Vs les "Client Components"

Regardons ce que dit NextJS sur le choix d'un composant "Client" ou "Server"

Regardons comment utiliser un composant côté client

Partie 12

Quiz interactif

Challenge : 1 question

Question

Partie 13

Utiliser NextJS avec Tailwind CSS

Pour avoir de beaux projets, il faut pouvoir maîtriser les bons outils. Dans cette partie, vous apprendrez à utiliser Tailwind CSS avec NextJS pour vous passer d'utiliser des feuilles de style et faire des designs facilement et rapidement.

Qu'est-ce que Tailwind CSS ?

Nos premiers pas avec Tailwind CSS et React

Factorisons nos classes avec @apply

Personnalisons les classes de Tailwind CSS par nous-même

Les media queries avec Tailwind CSS

Les pseudos-éléments avec Tailwind CSS

Modifier dynamiquement une classe avec Tailwind CSS

Faisons un bilan sur les points positifs et négatifs de Tailwind CSS

Partie 14

Quiz interactif

Challenge : 1 question

Question

Partie 15

NextJS et les 3 types de rendus : Statiques (SSG), Serveurs (SSR), Incrémentaux (ISR)

NextJS propose trois types de rendus. Ces trois types de rendus permettent de s'adapter à nos besoins pour créer des pages performantes (ce qui par la suite améliore aussi notre référencement naturel et l'expérience utilisateur). Dans cette partie, nous apprenons à maîtriser les trois types de rendus pour avoir toutes les cartes en main sur nos projets.

Quels sont les 3 types de rendus de NextJS et qu'est-ce que ça veut dire ?

Générer une page statique (Static Site Generation)

Afficher les erreurs avec error.jsx

Faire du rendu côté serveur (Server Side Rendering)

Générer une page statique incrémentale (Incremental Static Generation)

Afficher un écran de chargement avec loading.jsx

Afficher un loader pour une partie des données

Effectuer des vérifications en "cours de route" avec middleware.js

Partie 16

Quiz interactif

Challenge : 1 question

Question

Partie 17

Les "Server Actions" pour éxecuter des requêtes à la volée

Les "Server Actions" permettent d'effectuer des opérations directement sur le serveur (même quand la demande vient du client), ce qui permet de sécuriser les informations et de protéger le fonctionnement de nos algorithmes. Nous apprenons dans cette partie à les utiliser parfaitement.

Qu'est-ce qu'un Server Action ?

Ajouter un projet sur firebase

Faire une requête pour ajouter des données (POST)

Créer une structure propre pour un server action

Bloquer le bouton pendant l'envoi de la requête

Attention au cache ! Forcer NextJS à mettre à jour le cache de la requête

Partie 18

Créer sa propre API grâce à NextJS

L'une des grandes forces de NextJS vient de son système d'API : il est en effet possible d'utiliser le serveur pour accéder aux documents, mais aussi pour effectuer des requêtes sécurisées. C'est que nous apprenons à faire dans cette partie.

Qu'est-ce qu'une API ?

Comment fonctionne le système d'API de NextJS ?

Détecter un type de requête avec NextJS (GET, POST, DELETE, ...)

Rendons notre page vraiment statique

Appeler la page "not-found"

Partie 19

Quiz interactif

Challenge : 1 question

Question

Partie 20

Optimiser son projet grâce à NextJS

NextJS permet d'utiliser tout un tas de composants pour optimiser la rapidité du chargement d'une page. Nous voyons ensemble dans cette partie le composant "Image" qui nous permet d'optimiser nos images en "lazy loading" ainsi que la génération des metadatas pour avoir des liens superbement partageables sur les réseaux-sociaux.

Qu'allons-nous voir dans cette section ?

Le problème avec nos pages

Générer des metadata statiques

Générer des metadata dynamiques

Le problème avec nos images

Le composant Image

Faisons le tour des options du composant Image

Optimiser des images externes

Partie 21

Quiz interactif

Challenge : 1 question

Question

Partie 22

Il est temps de réaliser un vrai projet : Threads !

La clé d'un apprentissage réussi vient des projets que nous avons fait : c'est exactement le but de cette partie qui démarre notre projet complet sur Threads, le réseau-social de Meta.

Voici le projet que nous allons réaliser ensemble

Ce qu'il faut faire avant de commencer un projet

Créons notre nouveau projet

Préparons notre structure

Détecter si l'utilisateur est authentifié (middleware.jsx)

Créons la page de connexion

L'option "utiliser sans profil"

Implémenter la logique derrière le "mode invité"

Partie 23

L'interface des utilisateurs authentifiés

L'objectif dans cette partie est d'ajouter une interface puissante et conviviale pour pouvoir authentifier nos utilisateurs.

Créer le layout pour les utilisateurs authentifiés

Créer la page d'accueil

Créer le profil

Créer la page de recherche

Créer le formulaire d'inscription

Créer le formulaire de connexion

Partie 24

NextJS et l'authentification

NextJS propose son propre système d'authentification très facile à installer et à utiliser. Il permet d'inscrire et de connecter un utilisateur rapidement grâce à une adresse email et un mot de passe, ou via un compte Google par exemple. Notre objectif dans cette partie est de l'implémenter dans notre projet Threads.

Comment fonctionne l'authentification avec NextJS ?

Utilisons la librairie "next-auth"

Créer un compte sur mongodb

Rendre fonctionnel l'inscription

Détecter le chargement du formulaire

Rendre fonctionnel la connexion

Modifier l'interface d'un utilisateur

Déconnecter notre utilisateur

Mettons en place la variable d'environnement de Next-Auth

Partie 25

Terminons notre projet

Cette partie est dédiée aux petits détails qui permettront de terminer notre projet sur Threads.

Créer un nouveau thread

La logique derrière la création d'un nouveau thread

Récupérer les threads

Supprimer le cache

Utiliser momentjs pour la date

Charger le profil d'un utilisateur

Afficher l'icône du profil

Ajouter une fenêtre modale pour créer un thread

Supprimer un thread

Détecter un utilisateur non trouvé

Modifier un profil

Ajouter la logique de modification du profil

Mettre à jour le JWT

Quelles sont les pistes d'amélioration ?

Partie 26

Mettre son projet en ligne

Avoir un projet réalisé avec NextJS ? Super ! Mais pouvoir l'envoyer sur un serveur afin que tout le monde en profite, c'est bien mieux ! Nous apprendrons dans cette partie à mettre notre projet réalisé avec NextJS sur Vercel, le créateur du framework.

Les deux types de possiblité pour déployer un projet NextJS

Déployons notre projet sur Vercel

Corrigeons notre fichier de configuration

Modifions nos images de profil

Partie 27

Conclusion

On termine notre formation sur une petite touche de bonheur avec une larme à l'oeil, et on se dit au revoir.

Félicitations ! Vous avez terminé cette formation !

Décrochez votre certification

À la fin de cette formation, vous recevrez une certification attestant de vos compétences avec NextJS 15 si vous réussissez tous vos quizs.

Contenu à jour au May 28, 2025

En français 🇫🇷

Certificat d'achèvement partageable

Accompagnement par nos mentors

Codes sources fournis

Avis des apprenants sur notre formation NextJS 15

4.9 / 5

154 avis (Trustpilot et Believemy)

Formation incroyable et Formateur au top ! En général j'ai extrêmement de mal à finir une formation mais celle-ci est tellement intéressante que je l'ai fini très vite ! Merci Louis Nicolas.

Noé L.

Développeur web vérifié par Trustpilot

Formation poussée et très complète qui traite de beaucoup de sujets que l'on ne trouve pas sur les autres plateformes. Pédagogie claire, explications très bonnes. On sent vraiment que l'on progresse, beaucoup d'exercices de mise en situation. Je ne regrette absolument pas mon choix, merci beaucoup :)

Sébastien A.

Développeur web vérifié par Trustpilot

Prérequis

HTML et CSS

JavaScript

React

Formateur

Louis-Nicolas Leuillet

FAQs

C'est quoi NextJS ?

NextJS est un framework qui permet de créer des sites web rapidement grâce à React qu'il utilise comme base. Il aide les développeurs à construire des pages qui se chargent très vite et qui sont faciles à optimiser, en combinant les avantages du développement côté client et du développement côté serveur.

En plus de tout ceci, il rend le référencement naturel plus facile, ce qui est un gros avantage pour les sites web qui veulent être bien référencés sur les moteurs de recherche.

Combien de temps me faudra-t-il pour terminer cette formation ?

Nos apprenants passent en moyenne 50 heures pour terminer cette formation.

Faut-il respecter des horaires pour suivre la formation ?

Non, vous pouvez suivre la formation à votre rythme, elle se fait entièrement en ligne. Vous pouvez donc suivre cette formation où et quand vous le souhaitez.

Quel est le niveau requis pour suivre cette formation ?

Cette formation est accessible à tous les niveaux. Si vous n'avez jamais utilisé NextJS 15, il vous suffit de commencer par le début et de suivre les modules dans l'ordre.

Si vous avez déjà des connaissances avec NextJS 15, vous pouvez directement vous rendre aux modules qui vous intéressent.

Est-ce que je peux poser des questions si j'ai un problème ?

Oui, vous pouvez poser des questions à tout moment. Nous avons une équipe de mentors qui est là pour vous aider et répondre à vos questions si vous avez un problème.

Vous pourrez même rejoindre notre communauté privée pour échanger avec les autres apprenants.

Est-ce que je recevrais un certificat à la fin de la formation ?

Oui, vous recevrez un certificat de fin de formation à la fin de la formation. Ce certificat est un gage de votre réussite car vous devrez valider tous vos modules et tous les quizs pour le recevoir : c'est une preuve de votre investissement.

La formation est-elle à jour avec la dernière version ?

Oui, la formation est à jour avec la dernière version de NextJS 15. Nous mettons régulièrement à jour nos formations pour qu'elles soient toujours à jour avec les dernières technologies.

Pourquoi apprendre NextJS 15 alors que l'intelligence artificielle est en plein essor ?

Parce que l'intelligence artificielle ne remplacera jamais un développeur spécialisé. Elle ne sait déjà pas créer un pauvre site internet en HTML et en CSS, et quand elle y parvient, elle y a été préparée pendant des mois par des équipes de développeurs pour un coût exorbitant en terme d'électricité.

Par exemple, l'intelligence artificielle de Google, qui a battu le champion du monde de Go (un jeu de stratégie chinois) a été préparée pendant des mois pour cet unique match et a consommé l'équivalent de la consommation électrique d'une ville de 10 000 habitants pendant un an.

Une intelligence artificielle ne sera jamais capable ni rentable pour créer un site internet complexe sur-mesure avec des fonctionnalités spécifiques.