Next.js by Example

Develop static and full-stack web applications with React and Next.js 14. Includes Tailwind CSS, Strapi CMS, Prisma ORM.

4.71 (1119 reviews)
Udemy
platform
English
language
Web Development
category
instructor
7,856
students
21.5 hours
content
Mar 2024
last update
$89.99
regular price

What you will learn

Develop web applications with Next·js

Style components with Tailwind CSS

Build fully static websites or full-stack applications

Fetch data from a remote API such as a Headless CMS

Integrate with an SQL database using the Prisma ORM

Implement Authentication with Cookies and JSON Web Tokens

Description

Update: the course now also covers Server Actions, made stable in Next.js v14 (released Oct. '23), in addition to the other App Router features stable since Next.js v13.4 (May '23).  The first 13 hours explain the App Router, and the rest the older — but still supported — Pages Router.

Dubbed as “The React Framework for the Web”, Next.js makes it easy to build highly optimized web applications by server-side rendering React components.

This course will guide you through learning Next.js by developing a complete project step by step.

Part I will show you how to use Next.js as a Static Site Generator, prerendering all your pages to static HTML, CSS, and JavaScript.

This will teach you fundamental Next.js concepts such as file-based Routing, Prerendering, React Server Components, the differences between Server and Client Components, and how to fetch data in Server Components.

It will also use the popular Tailwind CSS framework for styling, demonstrate how to embed Custom Fonts into your application, and how to make your pages more SEO-friendly with metadata.

The Deployment section will present you the various options for running your application in production, from using a fully-managed platform like Vercel to performing a Static Export that can be uploaded to any web server.

Part II will show you how to use Next.js as a Full-Stack Framework, enabling features such as Dynamic Rendering, Time-based Revalidation, and On-demand Revalidation.

It will use a Headless CMSStrapi — to store data, and demonstrate how to call its REST API from the Next.js app, and the various options for updating the frontend pages when the data in the CMS changes.

It will also cover Image Optimization, showing how Next.js can convert and resize your images on-demand, and enable lazy-loading by the browser.

It will then demonstrate how to integrate third-party UI components in your app, and when it can still make sense to use Client-Side Data Fetching.

Part III provides an example of Database Integration, using the Prisma Object/Relational Mapper and an SQL database. It then explains how to process form submissions with Server Actions, and how to optimize page loads use Streaming and Suspense.

The final part adds Authentication, showing how to implement a typical Sign In flow using Cookies and JSON Web Tokens, store users' data in a database table, and restrict content to authenticated users.

You can follow the example using either JavaScript or TypeScript. The full source code is provided, with an easy way to see the changes made in every lecture.

Content

Getting Started

Next Blog: Overview
Required Tools
Next.js Project Setup
Source Code
Pre-rendering
Development vs Production Server

Routing and Navigation

Adding New Pages
Next Link Component
Shared NavBar Component
Custom App Component
Next Head Component

Styling

Global Styles
Component Styles with Styled JSX
Images and Other Assets

Loading Data

First Post Page
Markdown Syntax
getStaticProps Function
getStaticProps in Production Mode
Reading a File
Lib Module
Rendering Markdown
Front Matter
Dynamic Route and getStaticPaths
Listing Files in a Folder
Listing Posts
Dynamic Routes in Production Mode

Client-side Functionality

ThemeSwitch Component
Dark Mode Styles
DarkTheme Component
Hydration
Saving Preferences to Local Storage
Feature Detection

Deployment

Deployment Options
Vercel Platform
Exporting as a Static Website
Linux Server with Nginx
Linux Server with Node.js

Next Shop: Setup

Next Shop: Overview
Create Next App
TypeScript Support
Source Code
Tailwind CSS Setup
Utility-First CSS
High-level Architecture
Strapi Headless CMS
Backend Setup

Data Fetching

Displaying Products
Fetching Data Server-side
Fetching Data Client-side
Incremental Static Regeneration
Server-side Rendering
API Routes
Calling API Routes
Choosing a Data Fetching Strategy
Product Page Links
Product Page
Regenerating Product Pages
Fallback: Blocking
Fallback and Page Not Found
Shared fetchJson function
Custom Error Class
Fallback and Backend Unavailable
Environment Variables

Responsive Design and Image Optimization

Product Card
Responsive Grid
Product Images
Next Image Component
Responsive Product Page

Authentication

Strapi Authentication
Common Page Component
Sign In Form
Form State and Validation
Sign In API Request
Error and Loading States
API Route with POST
Login API Route
Setting a Cookie
NavBar with Authentication
User API Route
Loading User Data
Signing Out

React Query

Why React Query
useQuery Hook
useUser Custom Hook
useMutation Hook
Updating the Query Cache
useSignIn Custom Hook
useSignOut Custom Hook

Shopping Cart (Exercises)

Cart Items Collection
Cart Page
Cart API Route
Fetching Cart Items
Displaying Cart Items
POST Cart Handler
Add to Cart Widget
Add to Cart Mutation
Conclusion

Screenshots

Next.js by Example - Screenshot_01Next.js by Example - Screenshot_02Next.js by Example - Screenshot_03Next.js by Example - Screenshot_04

Reviews

Or
August 15, 2023
The material in this course is delivered in an enjoyable way and the instructor makes sure to explain all the concepts in a plain language making everything easy to understand. Also, whenever I ask a question the instructor typically replies in less than a few hours which is very impressive. It surely feels like Mirko is passionate about teaching. Great course, thanks a lot!
John
July 24, 2023
I am loving this course. If like me you have been learning React but now want to delve into Next JS, this is an excellent starter course. The tutor explains all the fundamentals very clearly. There are many courses on Next JS that can take you through building some good and complex apps, but this is the only one I have found that takes you through the first principles of Next JS in such a thorough way, giving you the bedrock you need to tackle more complex projects.
Christopher
July 10, 2023
Excellent course plan. This is exactly what I need to know to start with NextJs Tailwind. The instructor is very knowledgeable. He's able to explain everything very well. I'm glad that I chose this course over others. I'm shifting from .Net Developer to Full Stack Developer. What's making this course ahead from others, is the fact that he teaches both app and pages router and uploaded some updates recently. How I wish this course also touches some database management system. But overall, excellent! Thank you very much.
Mark
July 10, 2023
I like it, the instructor is great and teaches what's happening behind the scenes. I like how it discussed manual setup instead of using the template to start creating a next.js app.
Michael
July 10, 2023
Great course and Mirko is a responsive instructor. The course doesn't feel excessively long but also still goes into deep enough detail to understand the core of what's going on with Next.js. Looking forward to more of the updated app router material.
Hardip
July 8, 2023
Absolutely recommend this course if you want to learn NextJs . The step-by-step approach is easy to follow and extremely effective.Note however you should be familiar with ReactJs before taking this course.
Justin
June 24, 2023
Unlike most Next courses on YouTube, this tutorial (so far) has done an excellent job of explaining every step of the process.
Lucas
June 22, 2023
Amazing course. The course already has the new App Router, furthermore, the instructor goes very deeply into the subject, and in this way, I can understand not only how to do, but also how things really works. Another excellent feature is the subtitle in English, despite this being simple, most courses do not have.
ANDRIC
May 12, 2023
The course creator explains things by example, which is exactly what I expected! I feel like I understand Next.js more now, even though I’ve already read the docs, this gives me new information.
Konstantinos
May 8, 2023
Mirko is an excellent teacher who not only explains the core principles of the course very well but also provides advice and demonstrates best practices. He is one of my favorite teachers so far, and I hope to have the opportunity to take another course with him in the future!
Marcus
April 25, 2023
Best modern web development course I have take. I never understood SSR, CSR, Hydration, etc properly until now. He explains everything clearly and demonstrates multiple ways to approach things. Bits of the course are also updated along with a helpful Q&A section. I encourage you to understand the bits when he goes into the chrome network tab and explains rendering, requests, etc. It may feel boring (since you are not coding) but it will provide the clearest explanation of these topics While most of the course uses pre-next13 conventions, I still highly recommend you learn all of this before learning the newer way to do things. UPDATE: The new /app router additions are just as great.
Danesh
April 20, 2023
So far great, very easy to understand, concepts and similarities and differences between react and nextjs explained perfectly.
Adama
April 7, 2023
this course is a high level the teacher explains very well thank you so much. We really appreciate what you give it to us
Takhir
March 22, 2023
Great explanation! Author keeps track of libraries releases and makes a course updates accordingly by comments below class or sometimes even replacing whole lesson. Easy to follow. Thumb up for sure. Highly recommend!
Russ
March 11, 2023
Definitely 5 stars. Everything essential is covered to get up to speed on NextJS. The three most important aspects of rating a course are here: 1) Course delivers everything it promises - everything is current and everything works. 2) Teaching style is appropriate for the content and expected audience, 3) Responses to student questions are prompt and very thorough and helpful.

Charts

Price

Next.js by Example - Price chart

Rating

Next.js by Example - Ratings chart

Enrollment distribution

Next.js by Example - Distribution chart

Related Topics

3941068
udemy ID
3/26/2021
course created date
8/18/2021
course indexed date
Bot
course submited by