Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS AWS Certified Developer - Associate CompTIA Security+
Photoshop Graphic Design Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Mindfulness Personal Development Personal Transformation Meditation Life Purpose Coaching Neuroscience
Web Development JavaScript React CSS Angular PHP Node.Js WordPress Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
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
Development Web Development React

Universal React with Next.js - The Ultimate Guide

Learn how to make awesome server-rendered React apps with Next.js
Rating: 4.3 out of 54.3 (602 ratings)
4,010 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

Course content

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
Alicia Scarborough
118 courses
7 reviews
Rating: 5.0 out of 5a 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.

Instructor

Reed Barger
Professional Web and Mobile Developer
Reed Barger
  • 4.3 Instructor Rating
  • 8,423 Reviews
  • 35,917 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!

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.