Development
Web Development
React
Universal React with Next.js - The Ultimate Guide
4.2 (508 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
3,330 students enrolled

Universal React with Next.js - The Ultimate Guide

Learn how to make awesome server-rendered React apps with Next.js
4.2 (508 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
3,330 students enrolled
Created by Reed Barger
Last updated 1/2020
English
English [Auto]
Preview this course
Universal React with Next.js - The Ultimate Guide
Current price: $20.99 Original price: $29.99 Discount: 30% off
5 hours left at this price!
Buy now
30-Day Money-Back Guarantee
This course includes
  • 9.5 hours on-demand video
  • 6 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Create amazing server-rendered React apps with NextJS
  • Build projects ranging from fast static sites in NextJS to full-scale apps with a complete Node / Express backend
  • Use the added features of the NextJS framework to improve your React apps
Course content
Expand all 90 lectures 09:20:52
+ – Project 1 - Portfolio App
11 lectures 01:04:49
Setting up Portfolio Project
Preview 05:18
Next Links, Serving Static Images
04:53
Components in Next, CSS with Styled JSX
07:50
Next Router, NProgress for Route Loading State
04:00
Custom Document Page
05:23
Fetching Data with getInitialProps
08:24
Custom Error Page
06:13
Dynamic Pages with Query Parameters
06:36
Cleaner Urls without Query Params
04:30
Deploying our App as a Static Site to Now v1 (Outdated)
06:58
Deploying Static Sites with Now v2 (Updated)
04:44
+ – Project 2 - Hacker News Progressive Web App
12 lectures 01:22:58
Intro to Hacker News Clone
Preview 00:42
Init Hacker Next Project
02:17
Handling Errors with Built-in Error Page and Try / Catch
07:43
Styling the News Stories
07:23
Adding Layout Component, Head Component for SEO
05:46
Fetching Next Page of Stories, Adding Pagination with Query Params
06:19
Building the Individual Story Page
07:15
Adding Comments to Story / Nested Comments with Recursive Component
10:25
Using Next Router to Add a Back Button
03:09
Generating a Web App Manifest to our Project (Optional)
09:42
Making our App Run Offline with Service Workers (Optional)
18:26
Deploying Hacker Next with Heroku
03:51
+ – Project 3 - Cookie Authentication with Express
13 lectures 01:23:15
Intro to User Authentication Project
Preview 02:19
Init Project, Create Express Server
02:55
Using the getRequestHandler, Adding Nodemon
03:18
Create Login Form, Handle Post Request on Server
10:47
Authenticating Users with Signed Cookies
11:41
Fetching a User's Profile upon Login
08:51
Displaying / Handling Errors upon Login
06:21
Creating a Layout Component / Navigation
05:59
Persisting User Session with Custom Document Page
10:13
Persisting User Sessions on the Client and Server
08:17
Logging out Users, Clearing Cookies
04:27
Creating Protected Routes / Route Guards
05:47
Deploying Next Cookie Auth with Heroku
02:20
+ – Final Project - Full-Stack Social Media App (Express API)
21 lectures 01:50:00
Demo of our Social Media App
Preview 09:35
Git Clone and Install Project Dependencies
00:58
Add our MongoDB Atlas Database
05:33
Installing the Postman Desktop App
02:17
Overview of Server Code
08:49
Validate Signup and Signup
09:00
Signin with Passport
03:07
Signout and checkAuth Middleware
02:37
Get All Users
03:06
Using Router.param() to Get / Delete User
08:13
Getting the Authenticated User's Data
03:12
Getting the User's Profile
02:24
Following Users
06:02
Unfollowing Users
01:49
Getting a User Feed
03:12
Updating Users / Uploading and Resizing Avatars
10:16
Adding Posts / Uploading and Resizing Post Images
09:14
Getting Posts By User / Getting User's Post Feed
05:18
Liking and Unliking our Posts
04:37
Adding and Removing Comments to our Posts
05:48
Deleting Posts
04:53
+ – Final Project - Full-Stack Social Media App (React Client)
31 lectures 03:31:55
Moving onto our Client, Generating an App Color Palette
08:14
Building the Navbar Component
03:51
Creating Active Link Component / Prefetching Pages
06:37
Basic Functionality for our Signup Page
08:11
Creating Error Snackbar and Success Dialog in Signup
09:54
Building Signin Form / Ability to Signin
05:48
Toggling Auth / UnAuth Navigation and Implementing Protected Routes
06:02
Creating Custom Routes with Express
03:38
Displaying User Profiles on the Profile Page
10:15
Follow / Unfollow Users from Profile Page
09:36
Deleting Auth Users from Profile Page
09:21
Create Edit Profile Page, Populate Form with Auth User Data
09:33
Updating our User with the Edit Profile Form
06:56
Showing Error and Success for Editing the User
06:01
Creating a Splash Page for UnAuth Users
04:31
Building Index Layout and User Feed
13:47
Updating State with NewPost
10:00
Adding Posts from NewPost Component
06:23
Displaying Posts in the Post Component
09:14
Deleting Posts, Removing them from UI
05:26
Liking / Unliking Posts
05:48
Displaying Like / Unlike Status in UI
05:23
Using Pure Components
03:58
Scaffolding Comments Component
06:42
Adding and Displaying Comments
07:31
Deleting Comments
03:21
Displaying User Posts on Profile Page
07:33
Adding Post Feed Functionality to our Profile Page
03:41
Displaying Following / Followers in Profile Page
04:43
Formatting Times / Dates with Date-Fns
05:40
Deploying Next Connect with Heroku
04:17
Requirements
  • Basic understanding of React
  • Familiarity with ES6 JavaScript
Description

Do you want to make amazing, performant, and overall better React applications?  Look no further than Next.js.

This course is the best guide you'll find to learn the Next.js framework. In it, we will be making FOUR complete React / Next.js projects, each from project start to deployment on the web.

Here's what we'll be making:

  • A full-stack social media application, built with React.js / Next, a complete Express API, Mongoose / MongoDB, Passport Authentication, and Material UI

  • A Hacker News progressive web app that can run offline and has a perfect (100/100) Lighthouse score

  • A user authentication system which uses signed, secure cookies

  • A portfolio application built as a static site

What will be covered?

  • User Authentication with Passport in Next.js

  • Cookie Authentication in Next / Getting Cookies from Server and the Client

  • Lifecycle Methods like getInitialProps for Fetching Data and User Authentication

  • Protected Routes / Route Guards in Next

  • Next Router, along with Page Prefetching

  • Query Params in Next.js and Custom Routes with Express

  • Integrating Next with a Custom Server Setup Like Express

  • Building APIs with the help of Next

  • Making Progressive Web Apps in Next.js (Web App Manifest and Service Workers)

  • Pagination using Query Params

  • Deploying our projects with Now v2 and Heroku (both as static sites and Node.js apps)

  • Improving SEO with the help of the custom Head component in Next

  • Custom Error Pages for better Error Handling

  • Custom Pages in Next (_App and _Document)

  • Styling our Apps with Styled-JSX

  • Building impressive user interfaces with Material-UI

  • Integrating CSS-in-JS options like Material-UI with Next.js

  • Snackbar Notifications with Material UI

  • And much more...

Who this course is for:
  • Anyone interested in making better, more performant React apps with NextJS
  • React developers interested in the advantages the NextJS framework has to offer
  • Developers interested in broadening their React skillset
Featured review
Dariy Kutelov
Dariy Kutelov ( 347 courses, 23 reviews )
a year ago
This course was very useful to me and reviewing what I learned, it is much more than my initial expectations. I really liked the social media full stack project and how it is structured. It was my first course of Reed and I enjoyed his concise and clear style of presenting and explanations.