Formation Next.js (English program)

Learn how to create modern and performant web applications with Next.js during this 3 days training!

Prix (Formation inter-entreprise)

1800€ HT / personne

Durée

3 jours

Dates

Nous pouvons organiser des sessions à d'autres dates ou dans d'autres villes (Bordeaux, Lille, Lyon, Marseille, Montpellier, Nantes, Nice, Paris, Strasbourg, Toulouse...)

This course is for developers with basic knowledge of React web development (HTML/CSS/JS for the interface) and Node.js, and who wish to deepen their skills as full-stack developers with Next.js.

You will learn how to create modern and performant web applications with Next.js.

We will discover how to create web pages with an interactive user interface, but also APIs that provide data to websites.

We will explore the advanced concepts that make Next.js a very powerful framework: full-stack development, serverless architecture, Jamstack, server and static rendering.

At the end of the course, you will know how to create a full-stack website from start to finish with Next.js.

You will also know how to leverage the complex features specific to Next.js to optimize your applications.

You will be able to exploit this knowledge on many use cases, from corporate landing pages to e-commerces with millions of products and softwares in "SaaS" mode.

The practical application project consists of individually creating an e-commerce site with optimal performances, and an API to feed it with data.

After the course, you will keep all the course materials and the application you created.

Covid-19: Nous restons ouverts. Cette formation est disponible à distance.

Les objectifs

  • Create a multi-page website with Next.js
  • Create an API entry point with Next.js
  • Create a dynamic page with a route parameter
  • Master the client-side rendering, server-side rendering and static rendering features of Next to optimize the performance of a site
  • Master the API creation features of Next.js, and know their particularities

Pré-requis

  • Master the basics of React and HTML/CSS/JavaScript development: knowing how to create a simple web page
  • Master the basics of Node.js and the HTTP protocol: knowing how to create a simple API
  • Ordinateur portable à apporter

Le programme de la formation Next.js (English program)

Day 1: Discovering Next

Discover Next.js
  • From React to Next.js, definition of a "meta-framework"
  • Use cases of Next.js: large-scale content sites, SaaS applications...
  • Next.js ecosystem: sample library, GitHub discussions, Discord
Coding a simple interface with multiple pages
  • The file-based router
  • The Link component, and "next/router"
  • Layouts with Next.js: root layout and nested layout
Styling a Next.js application
  • Next.js "Image" component
  • Styling a Next.js application:

Exercices:
- Discovering Next.js Discord
- Discovering Next.js learning resources
- Initialize your e-commerce site with the Create Next App command
- Create the home page of your e-commerce site
- Create your flagship product page and create links
- Create a navigation menu in the layout
- Create a dynamic product page for other products
- Retrieve data to display the product, client side with swr
- Add an image optimized by Next.js for product pages
- Install Bootstrap UI, change style globally, and change style for a single page

Day 2: Consuming data with the Jamstack

Discover the Jamstack
  • 2 principles of the Jamstack philosophy: APIs, and pre-rendering
  • Quick recap of client-side rendering and data consumption in React: fetch, useEffect, react-query, swr...
Server-side rendering: why, when and how
  • Server-side rendering with React
  • Consuming query params: a word on rehydration and the "isReady" parameter
  • Communication with data APIs: server-side fetch in getServerSideProps
  • Static rendering with getStaticPaths and getStaticProps
  • Render at compile time or render for each request? Use cases and performance implications
  • ISR to defer renders after build and regularly refresh static pages
  • Summary: SSR, ISR, SSG, CSR, how to choose?
Advanced static rendering for custom sites
  • Middleware for pages
  • Static customization with a middleware

Exercices:
- Discover of the Jamstack.org site
- Focus on the "network" tab of the browser's DevTools in the generic product page
- Add a query param "referrer" on the home page, and display it in the page
- Statically generate the flagship product page with data
- Configure ISR to auto-refresh the featured product page every day
- Server render (at request-time or statically) the generic product page
- Quiz: SSR, SSG, CSR, when to use which pattern
- A basic middleware: log information about the request
- Bonus if we have enough spare time: set up "feature flagging" ; set up a static A/B test using a route parameter, URL rewriting and middleware

Day 3: full-stack Next.js with API routes

Create an API with Next.js
  • Implement API routes with Next.js, via next-connect, the little cousin of Express
  • Share logic between an API route and page-level data fetching methods
Understanding the Serverless Architecture
  • More on the file-based router: code-splitting per page and serverless architecture
  • Connect to a database in a serverless context
  • Limits of serverless, and possible alternatives: satellite server, GitHub Actions, startup scripts
Conclusion: The Future of Next.js and React

Exercices:
- Create a pre-order page with an email form
- Call the API client-side, with fetch, to submit the form
- Create an API route to save pre-orders
- Reuse the same connection for each call of the serverless API route
- Create an API route to display the current number of pre-orders
- Retrieve the number of pre-orders during server-side rendering
- Quiz: what advantages of serverless over "long running", what is possible, what is not

Télécharger le programme

Le(s) formateur(s)

Eric Burel

Eric Burel

Eric est ingénieur diplômé de l'ENSIMAG et vit à Montpellier. Développeur et consultant indépendant au sein de sa société LBKE, il a participé à l'émergence de plusieurs startups technologiques.

Son dernier projet en date: architecturer et développer avec Next.js l'interface de l'application SaaS "Aptimize" d'Aplines, une startup de Schneider Electric.

Eric est investi dans le monde de l'open source, en tant que mainteneur du framework Vulcan. Son but est de démocratiser les technologies web les plus récentes : Next.js, GraphQL, React... Il a même reçu le fameux mug Next.js pour son engagement au sein de la communauté !

Il a formalisé et rendu public un pattern de programmation innovant pour la Jamstack, le "rendu segmenté", qui réduit la consommation des applications web et qu'il sera ravi de vous présenter au cours des formations.

Depuis 2020, Eric donne le cours d'introduction au développement web aux élèves-ingénieurs de l'EPF Montpellier.

Il partage régulièrement ses connaissances sous la forme d'articles, au sein de la publication en français PointJS ou en anglais sur le blog du projet Vulcan.

Retrouvez Eric sur GitHub, Medium ou encore Twitter.

Voir son profil détaillé

A propos de Human Coders

Human Coders c'est un centre de formation pour développeurs avec :

  • une certification Qualiopi, indispensable pour que vous puissiez obtenir des aides au financement via votre OPCO
  • de nombreux clients qui nous font confiance depuis des années
  • un manifeste pour garantir des formations à taille humaine, des formateurs passionnés, de véritables workshops...
  • 88 formations au catalogue, 1141 sessions depuis nos débuts en 2012 avec une moyenne de satisfaction de 4,6/5
  • la possibilité de vous proposer un accompagnement personnalisé ou du conseil après la formation

Besoin d'aide ?

Vous souhaitez discuter avec nous à propos de votre projet de formation ?
Vous voulez plus d'information sur une formation ou notre fonctionnement ?


Rappel Email

Nos forces

  • Des formations à taille humaine
  • Des formateurs passionnés
  • Des véritables workshop
Accéder au Manifeste

Nos clients

SAP
Voyage SNCF
Intel
Decathlon
Meetic
Banque Postale

Formation Next.js (English program)

Learn how to create modern and performant web applications with Next.js during this 3 days training!

This course is for developers with basic knowledge of React web development (HTML/CSS/JS for the interface) and Node.js, and who wish to deepen their skills as full-stack developers with Next.js.

You will learn how to create modern and performant web applications with Next.js.

We will discover how to create web pages with an interactive user interface, but also APIs that provide data to websites.

We will explore the advanced concepts that make Next.js a very powerful framework: full-stack development, serverless architecture, Jamstack, server and static rendering.

At the end of the course, you will know how to create a full-stack website from start to finish with Next.js.

You will also know how to leverage the complex features specific to Next.js to optimize your applications.

You will be able to exploit this knowledge on many use cases, from corporate landing pages to e-commerces with millions of products and softwares in "SaaS" mode.

The practical application project consists of individually creating an e-commerce site with optimal performances, and an API to feed it with data.

After the course, you will keep all the course materials and the application you created.

Covid-19: Nous restons ouverts. Cette formation est disponible à distance.

Les objectifs

  • Create a multi-page website with Next.js
  • Create an API entry point with Next.js
  • Create a dynamic page with a route parameter
  • Master the client-side rendering, server-side rendering and static rendering features of Next to optimize the performance of a site
  • Master the API creation features of Next.js, and know their particularities

Pré-requis

  • Master the basics of React and HTML/CSS/JavaScript development: knowing how to create a simple web page
  • Master the basics of Node.js and the HTTP protocol: knowing how to create a simple API
  • Ordinateur portable à apporter

Le programme de la formation Next.js (English program)

Day 1: Discovering Next

Discover Next.js
  • From React to Next.js, definition of a "meta-framework"
  • Use cases of Next.js: large-scale content sites, SaaS applications...
  • Next.js ecosystem: sample library, GitHub discussions, Discord
Coding a simple interface with multiple pages
  • The file-based router
  • The Link component, and "next/router"
  • Layouts with Next.js: root layout and nested layout
Styling a Next.js application
  • Next.js "Image" component
  • Styling a Next.js application:

Exercices:
- Discovering Next.js Discord
- Discovering Next.js learning resources
- Initialize your e-commerce site with the Create Next App command
- Create the home page of your e-commerce site
- Create your flagship product page and create links
- Create a navigation menu in the layout
- Create a dynamic product page for other products
- Retrieve data to display the product, client side with swr
- Add an image optimized by Next.js for product pages
- Install Bootstrap UI, change style globally, and change style for a single page

Day 2: Consuming data with the Jamstack

Discover the Jamstack
  • 2 principles of the Jamstack philosophy: APIs, and pre-rendering
  • Quick recap of client-side rendering and data consumption in React: fetch, useEffect, react-query, swr...
Server-side rendering: why, when and how
  • Server-side rendering with React
  • Consuming query params: a word on rehydration and the "isReady" parameter
  • Communication with data APIs: server-side fetch in getServerSideProps
  • Static rendering with getStaticPaths and getStaticProps
  • Render at compile time or render for each request? Use cases and performance implications
  • ISR to defer renders after build and regularly refresh static pages
  • Summary: SSR, ISR, SSG, CSR, how to choose?
Advanced static rendering for custom sites
  • Middleware for pages
  • Static customization with a middleware

Exercices:
- Discover of the Jamstack.org site
- Focus on the "network" tab of the browser's DevTools in the generic product page
- Add a query param "referrer" on the home page, and display it in the page
- Statically generate the flagship product page with data
- Configure ISR to auto-refresh the featured product page every day
- Server render (at request-time or statically) the generic product page
- Quiz: SSR, SSG, CSR, when to use which pattern
- A basic middleware: log information about the request
- Bonus if we have enough spare time: set up "feature flagging" ; set up a static A/B test using a route parameter, URL rewriting and middleware

Day 3: full-stack Next.js with API routes

Create an API with Next.js
  • Implement API routes with Next.js, via next-connect, the little cousin of Express
  • Share logic between an API route and page-level data fetching methods
Understanding the Serverless Architecture
  • More on the file-based router: code-splitting per page and serverless architecture
  • Connect to a database in a serverless context
  • Limits of serverless, and possible alternatives: satellite server, GitHub Actions, startup scripts
Conclusion: The Future of Next.js and React

Exercices:
- Create a pre-order page with an email form
- Call the API client-side, with fetch, to submit the form
- Create an API route to save pre-orders
- Reuse the same connection for each call of the serverless API route
- Create an API route to display the current number of pre-orders
- Retrieve the number of pre-orders during server-side rendering
- Quiz: what advantages of serverless over "long running", what is possible, what is not

Télécharger le programme

Le(s) formateur(s)

Eric Burel

Eric Burel

Eric est ingénieur diplômé de l'ENSIMAG et vit à Montpellier. Développeur et consultant indépendant au sein de sa société LBKE, il a participé à l'émergence de plusieurs startups technologiques.

Son dernier projet en date: architecturer et développer avec Next.js l'interface de l'application SaaS "Aptimize" d'Aplines, une startup de Schneider Electric.

Eric est investi dans le monde de l'open source, en tant que mainteneur du framework Vulcan. Son but est de démocratiser les technologies web les plus récentes : Next.js, GraphQL, React... Il a même reçu le fameux mug Next.js pour son engagement au sein de la communauté !

Il a formalisé et rendu public un pattern de programmation innovant pour la Jamstack, le "rendu segmenté", qui réduit la consommation des applications web et qu'il sera ravi de vous présenter au cours des formations.

Depuis 2020, Eric donne le cours d'introduction au développement web aux élèves-ingénieurs de l'EPF Montpellier.

Il partage régulièrement ses connaissances sous la forme d'articles, au sein de la publication en français PointJS ou en anglais sur le blog du projet Vulcan.

Retrouvez Eric sur GitHub, Medium ou encore Twitter.

Voir son profil détaillé

A propos de Human Coders

Human Coders c'est un centre de formation pour développeurs avec :

  • une certification Qualiopi, indispensable pour que vous puissiez obtenir des aides au financement via votre OPCO
  • de nombreux clients qui nous font confiance depuis des années
  • un manifeste pour garantir des formations à taille humaine, des formateurs passionnés, de véritables workshops...
  • 88 formations au catalogue, 1141 sessions depuis nos débuts en 2012 avec une moyenne de satisfaction de 4,6/5
  • la possibilité de vous proposer un accompagnement personnalisé ou du conseil après la formation

* Nombre de personnes ayant répondu au questionnaire de satisfaction sur cette formation depuis 2012