Sélectionner une page
Formations Langage JavaScript Formation NextJS 15

Formation NextJS 15

Niveau confirmé
Catégorie Essential

logo formation nextjs
Prix 1800€ HT / personne
3 jours (21 heures)
Parcours CPF

Paris | Classe Virtuelle

Dernières places Virtuelle uniquement
Labs : Infrastructure DaaS avec Chrome
Cafés et déjeuners offerts en interentreprises
En intra-entreprise pour former votre équipe
Aide au financement 2500€ Bonus Atlas CPF

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

 

JOUR 1: PRISE EN MAIN DE NEXTJS ET FONDAMENTAUX

  • – Next.js et son écosystème : lien avec React, Vercel, documentation
  • Créer une nouvelle application avec le CLI create-next-app
  • Découvrir la structure du projet
  • TypeSCript et TailwindCSS
  • Implémenter une interface simple multi-pages
  • Ajouter du style dans Next.js
  • Découvrir le système de layout
  • Créer une page de contenu avec un paramètre dynamique
  • Obtenir des données côté client via un appel d’API
  • Optimiser les images et les polices
  • Naviguer entre des pages

 

JOUR 2: NEXT FULL-STACK AVEC LES ROUTE HANDLERS (API) ET SERVER ACTIONS

  • Découvrir vercel et connecter une base de donnée
  • Récupérer des données serveurs (server composants vs client composants)
  • Comprendre les différents mécanismes de rendu: Static vs Dynamic, Streaming Incrémental et Partiel
  • Rechercher et paginer
  • Muter des données
  • Gérer les erreurs: 500, 404,…

 

JOUR 3: OPTIMISATIONS ET DÉPLOIEMENT

  • Accessibilité et validation de formulaire côté serveur
  • Ajouter authentification
  • Ajout de métadonnée, référencement et pwa
  • Créer un repo Github, pusher son code
  • CI/CD Github actions et déploiement sur vercel
  • Revue d’ensemble et récapitulatif

 

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

2 octobre 2024

Je recommande la formation

Eric J. de chez Direction de la maintenance aéronautique (DMAé)

Afficher tous les témoignages

2 octobre 2024

Je recommande la formation

Eric J. de chez Direction de la maintenance aéronautique (DMAé)
12 juin 2024

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

Benjamin P. de chez MINISTÈRE DU TRAVAIL DU PLEIN EMPLOI ET DE L' INSERTION
12 juin 2024

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.

Sylvain B. de chez MINISTÈRE DU TRAVAIL DU PLEIN EMPLOI ET DE L' INSERTION

Noter la formation

Prix 1800€ HT / personne
3 jours (21 heures)
Parcours CPF

Paris | Classe Virtuelle

Dernières places Virtuelle uniquement
Labs : Infrastructure DaaS avec Chrome
Cafés et déjeuners offerts en interentreprises
En intra-entreprise pour former votre équipe
Aide au financement 2500€ Bonus Atlas CPF

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

partenaire sncf
partenaire hp
partenaire allianz
partenaire sfr
partenaire engie
partenaire boursorama
partenaire invivo
partenaire orange
partenaire psa
partenaire bnp
partenaire sncf
partenaire hp
partenaire allianz
partenaire sfr
partenaire engie
partenaire boursorama
partenaire invivo
partenaire orange
partenaire psa
partenaire bnp