English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 9.5 Hours | 4.28 GB
Learn how to make awesome server-rendered React apps with Next.js
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?
- Cookie Authentication in Next / Getting Cookies from Server and the Client
- User Authentication with Passport in Next.js
- 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 (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…
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
Table of Contents
01 What is Next.js What is Server-Side Rendering
02 Tools Required for this Course
03 Setting up Portfolio Project
04 Next Links, Serving Static Images
05 Components in Next, CSS with Styled JSX
06 Next Router, NProgress for Route Loading State
07 Custom Document Page
08 Fetching Data with getInitialProps
09 Custom Error Page
10 Dynamic Pages with Query Parameters
11 Cleaner Urls without Query Params
12 Deploying our App as a Static Site to Now
13 Intro to Hacker News Clone
14 Init Hacker Next Project
15 Handling Errors with Built-in Error Page and Try Catch
16 Styling the News Stories
17 Adding Layout Component, Head Component for SEO
18 Fetching Next Page of Stories, Adding Pagination with Query Params
19 Building the Individual Story Page
21 Using Next Router to Add a Back Button
22 Generating a Web App Manifest to our Project (Optional)
23 Making our App Run Offline with Service Workers (Optional)
24 Deploying Hacker Next and Performing a Lighthouse Audit
25 Intro to User Authentication Project
26 Init Project, Create Express Server
27 Using the getRequestHandler, Adding Nodemon
28 Create Login Form, Handle Post Request on Server
29 Authenticating Users with Signed Cookies
30 Fetching a User’s Profile upon Login
31 Displaying Handling Errors upon Login
32 Creating a Layout Component Navigation
33 Persisting User Session with Custom Document Page
34 Persisting User Sessions on the Client and Server
35 Logging out Users, Clearing Cookies
36 Creating Protected Routes Route Guards
37 Deploying our Cookie Auth App
38 Demo of our Social Media App
39 Git Clone and Install Project Dependencies
40 Add our MongoDB MLab Database
41 Installing the Postman Desktop App
42 Overview of Server Code
43 Validate Signup and Signup
44 Signin with Passport
45 Signout and checkAuth Middleware
46 Get All Users
47 Using Router.param() to Get Delete User
48 Getting the Authenticated User’s Data
49 Getting the User’s Profile
50 Following Users
51 Unfollowing Users
52 Getting a User Feed
53 Updating Users Uploading and Resizing Avatars
54 Adding Posts Uploading and Resizing Post Images
55 Getting Posts By User Getting User’s Post Feed
56 Liking and Unliking our Posts
57 Adding and Removing Comments to our Posts
58 Deleting Posts
59 Moving onto our Client, Generating an App Color Palette
60 Building the Navbar Component
61 Creating Active Link Component Prefetching Pages
62 Basic Functionality for our Signup Page
63 Creating Error Snackbar and Success Dialog in Signup
64 Building Signin Form Ability to Signin
65 Toggling Auth UnAuth Navigation and Implementing Protected Routes
66 Adding Next NProgress to Display Loading State
67 Creating Custom Routes with Express
68 Displaying User Profiles on the Profile Page
69 Follow Unfollow Users from Profile Page
70 Deleting Auth Users from Profile Page
71 Create Edit Profile Page, Populate Form with Auth User Data
72 Updating our User with the Edit Profile Form
73 Showing Error and Success for Editing the User
74 Creating a Splash Page for UnAuth Users
75 Building Index Layout and User Feed
76 Updating State with NewPost
77 Adding Posts from NewPost Component
78 Displaying Posts in the Post Component
79 Deleting Posts, Removing them from UI
80 Liking Unliking Posts
81 Displaying Like Unlike Status in UI
82 Using Pure Components
83 Scaffolding Comments Component
84 Adding and Displaying Comments
85 Deleting Comments
86 Displaying User Posts on Profile Page
87 Adding Post Feed Functionality to our Profile Page
88 Displaying Following Followers in Profile Page
89 Formatting Times Dates with Date-Fns
90 Deploying our Social Media App
Resolve the captcha to access the links!