Universal React with Next.js - The Ultimate Guide

Name: Universal React with Next.js - The Ultimate Guide
Rating: 4.1 (639 reviews)

Learn how to make awesome server-rendered React apps with Next.js

(639 ratings)

4,304 students

Created by Reed Barger

Last updated 1/2020

English

English [Auto]

30-Day Money-Back Guarantee

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

Curated for the Udemy for Business collection

6 sections • 90 lectures • 9h 20m total length

Preview06:33
Tools Required for this Course
01:22

Preview05: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

Preview00: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

Preview02: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

Preview09: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

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

Alicia Scarborough

118 courses

7 reviews

a year ago

Excellent course. It lived up to what I was expecting to get out of it (a firmer handle on NextJS and React). One thing to note... the IDE code hints got a bit annoying while watching & following along with the video. In the video the lines of code would get obscured momentarily by the code hints. Recommend that future course recordings that the code hints in the IDE are turned off to prevent the minor issue. Great course. Looking forward to taking more from this instructor.

Reed Barger

Professional Web and Mobile Developer

4.4 Instructor Rating
8,894 Reviews
38,013 Students
21 Courses

I am a professional developer with a passion for learning and teaching everything I know.

I believe in learning through doing and this philosophy is present in every course that I teach.

I love to explore new web & mobile technologies and my courses focus on giving you the edge in our fast-moving industry.

Looking forward to seeing you inside one of my courses!

Universal React with Next.js - The Ultimate Guide

What you'll learn

Course content

Getting Started2 lectures • 8min

Project 1 - Portfolio App11 lectures • 1hr 5min

Project 2 - Hacker News Progressive Web App12 lectures • 1hr 23min

Project 3 - Cookie Authentication with Express13 lectures • 1hr 23min

Final Project - Full-Stack Social Media App (Express API)21 lectures • 1hr 50min

Final Project - Full-Stack Social Media App (React Client)31 lectures • 3hr 32min

Requirements

Description

Who this course is for:

Featured review

Instructor