Nextjs by Example

Develop static websites and hybrid (static+SSR) web apps with React and Next.js, including Tailwind CSS, React Query
Nextjs by Example
File Size :
3.49 GB
Total length :
8h 30m



Mirko Nasato


Last update




Nextjs by Example

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

Nextjs by Example


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


Note: this course does not yet cover the new App Router functionality, declared stable in Next v14.4.0 on 2023-05-04.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 through learning Next.js by developing two examples: a fully static website, and a hybrid (static + server-side rendered) app.The first example, a personal blog website, will introduce you to fundamental Next.js concepts such as pre-rendering, file-system based routing, and hydration.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.The Deployment section will present you all the options for running your application in production, from fully-managed serverless platforms like Vercel to configuring your own Linux servers.The second example you will develop is a shop website. This will be a more complex application that loads its data from a Headless CMS (Strapi) and uses advanced Next.js features such as Incremental Static Regeneration to automatically reflect changes in the backend data.It will show you how to enable TypeScript support in a Next.js project if you wish to do so. Using TypeScript is optional; all but one of the videos use plain JavaScript. But you will find the full TypeScript code for the shop example in a GitHub repository if you prefer TypeScript.The website will use the popular Tailwind CSS library for styling, and the Next Image component for image optimization.You will see different ways to load data from an external API, including writing your own API routes in Next.js, and how to choose the best approach for your specific requirements.The example will include a secure authentication system based on JWT and cookies, and the React Query library will be used for caching data on the client side.The full source code for all examples is provided, with an easy way to see the changes made in every lecture.The course can be followed with the latest Next.js 13, however it does not yet cover the new App Router functionality.


Section 1: Getting Started

Lecture 1 Next Blog: Overview

Lecture 2 Required Tools

Lecture 3 Updates and Corrections

Lecture 4 Next.js Project Setup

Lecture 5 Source Code

Lecture 6 Pre-rendering

Lecture 7 Development vs Production Server

Section 2: Routing and Navigation

Lecture 8 Adding New Pages

Lecture 9 Next Link Component

Lecture 10 Shared NavBar Component

Lecture 11 Custom App Component

Lecture 12 Next Head Component

Section 3: Styling

Lecture 13 Global Styles

Lecture 14 Component Styles with Styled JSX

Lecture 15 Images and Other Assets

Section 4: Loading Data

Lecture 16 First Post Page

Lecture 17 Markdown Syntax

Lecture 18 getStaticProps Function

Lecture 19 getStaticProps in Production Mode

Lecture 20 Reading a File

Lecture 21 Lib Module

Lecture 22 Rendering Markdown

Lecture 23 Front Matter

Lecture 24 Dynamic Route and getStaticPaths

Lecture 25 Listing Files in a Folder

Lecture 26 Listing Posts

Lecture 27 Dynamic Routes in Production Mode

Section 5: Client-side Functionality

Lecture 28 ThemeSwitch Component

Lecture 29 Dark Mode Styles

Lecture 30 DarkTheme Component

Lecture 31 Hydration

Lecture 32 Saving Preferences to Local Storage

Lecture 33 Feature Detection

Section 6: Deployment

Lecture 34 Deployment Options

Lecture 35 Vercel Platform

Lecture 36 Exporting as a Static Website

Lecture 37 Linux Server with Nginx

Lecture 38 Linux Server with Node.js

Section 7: Next Shop: Setup

Lecture 39 Next Shop: Overview

Lecture 40 Create Next App

Lecture 41 TypeScript Support

Lecture 42 Source Code

Lecture 43 Tailwind CSS Setup

Lecture 44 Utility-First CSS

Lecture 45 High-level Architecture

Lecture 46 Strapi Headless CMS

Lecture 47 Note: Strapi Version

Lecture 48 Backend Setup

Section 8: Data Fetching

Lecture 49 Displaying Products

Lecture 50 Fetching Data Server-side

Lecture 51 Fetching Data Client-side

Lecture 52 Incremental Static Regeneration

Lecture 53 Server-side Rendering

Lecture 54 API Routes

Lecture 55 Calling API Routes

Lecture 56 Choosing a Data Fetching Strategy

Lecture 57 Product Page Links

Lecture 58 Product Page

Lecture 59 Regenerating Product Pages

Lecture 60 On-demand Revalidation

Lecture 61 Fallback: Blocking

Lecture 62 Fallback and Page Not Found

Lecture 63 Shared fetchJson function

Lecture 64 Custom Error Class

Lecture 65 Environment Variables

Section 9: Responsive Design and Image Optimization

Lecture 66 Product Card

Lecture 67 Responsive Grid

Lecture 68 Product Images

Lecture 69 Next Image Component

Lecture 70 Responsive Product Page

Section 10: Authentication

Lecture 71 Strapi Authentication

Lecture 72 Common Page Component

Lecture 73 Sign In Form

Lecture 74 Form State and Validation

Lecture 75 Sign In API Request

Lecture 76 Error and Loading States

Lecture 77 API Route with POST

Lecture 78 Login API Route

Lecture 79 Setting a Cookie

Lecture 80 NavBar with Authentication

Lecture 81 User API Route

Lecture 82 Loading User Data

Lecture 83 Signing Out

Section 11: React Query

Lecture 84 Why React Query

Lecture 85 useQuery Hook

Lecture 86 useUser Custom Hook

Lecture 87 useMutation Hook

Lecture 88 Updating the Query Cache

Lecture 89 useSignIn Custom Hook

Lecture 90 useSignOut Custom Hook

Section 12: Shopping Cart (Exercises)

Lecture 91 Cart Items Collection

Lecture 92 Cart Page

Lecture 93 Cart API Route

Lecture 94 Fetching Cart Items

Lecture 95 Displaying Cart Items

Lecture 96 POST Cart Handler

Lecture 97 Add to Cart Widget

Lecture 98 Add to Cart Mutation

Lecture 99 Wrap Up

Section 13: Conclusion

Lecture 100 Congratulations and Bonus

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

Course Information:

Udemy | English | 8h 30m | 3.49 GB
Created by: Mirko Nasato

You Can See More Courses in the Developer >> Greetings from

New Courses

Scroll to Top