Next.js by Example

Using React and Next.js 11 platforms, create static and hybrid (static and SSR) web applications, including Tailwind CSS, and React Query


  • Familiarity with modern web development: HTML, CSS, JavaScript, npm
  • Familiarity with React, including the useState and useEffect hooks


Next.js, also known as “The React Framework for Production”, makes it easy to create highly optimized web applications using React.

You will be guided through the development of two examples in this Next.js by Example course: a fully static website and a hybrid application (static and server-side rendered).

Next.js’s first example will introduce you to fundamental concepts like file-system-based routing, pre-rendering, and hydration for a personal blog website.

It will show you how to load data in pages that are statically generated at build time, and how to style your pages in global CSS files or with the styled-jsx library that provides component-scoped styles.

You will find all the options for running your production applications in the Deployment section, from serverless platforms such as Vercel to fully-managed Linux servers.

You will build a web shop as the second example of your work. The application will load its data from a Headless CMS (Strapi) and use advanced Next.js features such as Incremental Static Regeneration to reflect changes in the backend data automatically.

Trending Now:   A deep understanding of deep learning (with Python intro)

If you wish, it will demonstrate how to enable TypeScript support in Next.js projects. There is no requirement to use TypeScript; all videos but one use plain JavaScript. In case you prefer TypeScript, you can find the full TypeScript code for the shop example in a GitHub repository.

Styles will be applied through the Tailwind CSS library and images will be optimized via Next Image.

Several approaches will be presented for loading data from an external API, including writing your own API routes in Next.js, and how to choose the best approach for your needs.

This example will demonstrate a secure authentication process based on JWT and cookies, along with caching data at the client side using React Query.

You can view the changes made to the lecture sources for every example, with full source code provided for all examples.

In this Next.js by Example course, you’ll learn the latest Next.js version, version 11.

What you’ll learn

  • Develop web applications with Next·js
  • Style components with styled-jsx or Tailwind CSS
  • Build fully static websites or hybrid (static + SSR) apps
  • Fetch data from a remote API such as a Headless CMS
  • Implement cookie-based JWT authentication
  • Cache data with React Query

Who this course is for:

  • React/Web developers who want to build static or hybrid (static + SSR) web apps with Next·js
Trending Now:   The Ultimate Design Patterns: Part 1

Created by Mirko Nasato
Last updated 8/2021
Size: 3.4 GB

96 KB

Leave a Reply

Your email address will not be published.

Related Courses

Back to top button


Join our telegram channel and be the first to know when we post/update courses and also when we share awesome deals & freebies.