Formation NextJS 15
| 1800€ HT / personne |
| 3 jours (21 heures) |
Présentation
NextJS est un framework JavaScript construit pour React et basé sur la technologie de Node.js. Il est capable de créer des applications fournissent à la fois des pages générées par le serveur à chaque requête et des pages statiques générées lors du build applicatif.
NextJS vous permet de créer des applications JavaScript en code partagé entre le client et le serveur. Il a un système de routing intégré et très simple à utiliser. Un autre avantage de l’outil est son apport en SEO, en effet, grâce à Next vous pourrez optimiser le référencement de vos Singles Pages Apps.
Notre formation Next vous présentera les concepts fondamentaux du framework. Vous saurez développer un projet d’application web, vous connaîtrez le concept de Data Fetch et les différents modes de développement.
À savoir, le Server Side Rendering (SSR) et le rendu statique.
Cette formation NextJS vous enseignera la dernière version du framework NextJS 15.
Objectifs
- Créer des applications web universelles
- Maîtriser le SSR, le SSG et l’ISR avec le framework NextJS
- Créer des pages web optimisées pour les moteurs de recherche
- Créer des sites statiques et dynamiques
- Implémenter le data fetching via une stratégie statique (build) ou dynamique (run time)
Public visé
- Développeurs JavaScript
- Développeurs front
- Développeurs web
Pré-requis
- Connaissance du langage JavaScript, HTML, CSS
- Connaissance basique de ReactJS ou avoir assisté à notre formation ReactJS
Programme de notre formation Next.JS
Introduction à NextJS
- Qu’est-ce que NextJS ?
- Installation
- Configuration
- Fonctions de base avec NextJS
- Utilisation des composants ReactJS dans les pages
Développer une application avec NextJS
- Structure d’une application NextJS
- Création d’un projet d’application
- Création et utilisations des composants
- Gestion de l’état applicatif au travers des React Context
- Liaisons et formulaires
Système de routing
- Système de routage
- Composant Link
- Implication sur le routing de l’arborescence et nommage des dossiers
- Créer des routes dynamiques
- Paramètres de route dynamiques
- Interroger une route en utilisant un paramètre
- Paramètre ID
- Route Catch-All
- Route grouping
Déploiement
- Environnement de déploiement de NextJS
- Déploiement NextJS sur Vercel
- Déploiement de grands sites web avec NextJS
Data Fetching
- Introduction au getServerSideProps
- Récupération des données
- Routes dynamiques avec getServerSideProps
- Introduction au getStaticProps
- Récupération des données
- Routes statiques avec getStaticProps
- Utilisation du SSR, du CSR et du SSG
- Utilisation des middlewares
TypeScript avec NextJS
- Aperçu des plugins
- Meilleures pratiques
Configuration d’une base de données
- Création d’une base de données
- Connexion à la base de données
- Tester l’application
API
- Créer les APIs de base
- Créer des formulaires
- Changer les données avec la requête « POST »
- Objets req et res
- Authentification JWT
- Ajout d’une API REST
- Envoi, récupération et transformation des données
- Les servers actions
Optimisation des pages
- Utilisation du CSS
- Framework CSS
- Optimisation de Head
- Optimisation des images
- Utilisation d’un _document.js
- Le turbopack
Extension (+ 1 jour) : réaliser une PWA avec Next.JS
INTRODUCTION AU RESPONSIVE DESIGN
- Media queries
- Breakpoints
- Utiliser tailwind pour un layout responsive
- Viewport adaptatif
- Tester un rendu sur mobile
INTRODUCTION AU PWA
- Caractéristiques
- Comparaison avec les autres approches mobiles (react-native, code natif)
- Avantages
- Cycle de vie
- Utilisé des Services Worker
- Le fichier manifest.json
CRÉER UNE PWA AVEC NEXT.JS
- Génération des métadonnées
- Création des icônes applicatifs dans /public
- Utilisation du package next-pwa
- Prompt d’installation personnalisé
- Déploiement vercel
- Installation sur smartphone
Pour aller plus loin
Formation Nodejs
Formation Angular
Formation Vue.js
Formation React Native
Formation ReactJS
Formation Angular Avancé
Langues et Lieux disponibles
Langues
- Français
- Anglais / English
Lieux
-
France entière
- Paris
- Lille
- Reims
- Lyon
- Toulouse
- Bordeaux
- Montpellier
- Nice
- Sophia Antipolis
- Marseille
- Aix-en-Provence
- Nantes
- Rennes
- Strasbourg
- Grenoble
- Dijon
- Tours
- Saint-Étienne
- Toulon
- Angers
-
Belgique
- Bruxelles
- Liège
-
Suisse
- Genève
- Zurich
- Lausanne
-
Luxembourg
Témoignages
Je recommande la formation
Afficher tous les témoignages
Je recommande la formation Les + : Beaucoup de pratique, avec un projet ambitueux comme il faut, ni trop simple, ni trop dur. Concepts bien expliqués et formateur très présent pour aider. Les – : ras Les + : Aperçu rapide et complet de NextJS Les – : Il y a eu des soucis (bugs) avec NextJS lui même et après sur Vercel qui ont fait perdre un peu de temps. Je souhaite suivre : Je ne sais pas. En synthèse : Objectif principal accompli.
Noter la formation
| 1800€ HT / personne |
| 3 jours (21 heures) |
UNE QUESTION ? UN PROJET ? UN AUDIT DE CODE / D'INFRASTRUCTURE ?
Pour vos besoins d’expertise que vous ne trouvez nulle part ailleurs, n’hésitez pas à nous contacter.
ILS SE SONT FORMÉS CHEZ NOUS
