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:
  • Importing bootstrap,
  • Creating a global style,
  • Using styled-jsx

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

• Discover the open source starter Next Commerce
• About Server components and rehydration
• Discover advanced middlewares: Edge Handlers by Vercel

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

Le(s) formateur(s)

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