Next.js by Example

Next.js by Example paid course free for all. You will Develop static websites and hybrid (static+SSR) web apps with React and Next.js 11, including Tailwind CSS, React Query

  • 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

Next.js by Example Course Requirements

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

Next.js by Example Course Description

Described as “The React Framework for Production”Next.js makes it easy to build highly optimized web applications in React.

This course will guide you to learn Next.js by developing two examples: a completely static website and a hybrid application (rendering static + server-side). The first example, a personal blog site, will introduce you to basic Next.js. concepts such as pre-rendering, file system-based routing, and hydration. It will tell you how to load data into the page statically generated at compile-time, and how to style the page in the global CSS file or style with JSX. The library provides a range of styles for components.

The deployment section will introduce you to all the options to run production applications, like a fully managed serverless platform from Vercel, to build your own Linux server. The second example you will develop is a webshop WEB. This will be a more complex application that starts from a headless CMS (Strapi) and uses the load data to advance Next.js features such as incremental static regeneration to automatically reflect changes to the back-end data. It will tell you how to enable typescript support for a Next.js project if you want to do so.

Using typescript is optional, but all videos use simple JavaScript. But you will find the store for example full typescript code in the GitHub repository if you like typescript. The website will use the popular Tailwind CSS library design and the next image component to optimize the image. You will see different ways to load data. Write your own API path from external APIs, including Next.js, and choose the best method that suits your specific needs.

This example will include security authentication systems based on JWT and cookies and the faction query library will be used to cache data on the client-side. The complete source code is provided for all examples, and there is an easy way to see the changes made in each lesson. The course is updated with the latest version Next.js, which is 11.

Who this course is for:

  • React/Web developers who want to build static or hybrid (static + SSR) web apps with Next·js

Next.js by Example

Leave a Comment

Please disable your adblocker or whitelist this site! And Reload Page