Using React and Next.js 11 platforms, create static and hybrid (static and SSR) web applications, including Tailwind CSS, and React Query
- 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 (aff) 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 (aff).
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.
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
Created by Mirko Nasato
Last updated 8/2021
Size: 3.4 GB