Universal React with Next.js. Complete guide – Updated 2020

Course Curriculum

Chapter 1: Intro

Lecture 1: Introduction to course

Lecture 2: What are we going to build?

Lecture 3: What do you need to know before we start the course?

Lecture 4: Server Side Rendering vs Client Side Rendering

Chapter 2: Next.js introduction

Lecture 1: Whats is Next.js

Lecture 2: Hello Next.js

Lecture 3: eslint and prettier

Lecture 4: Static files

Lecture 5: Built-in CSS

Lecture 6: Shared component – The navbar

Lecture 7: SASS and Bulma

Lecture 8: Bulma continue

Chapter 3: Blog project

Lecture 1: _app.js component

Lecture 2: Page component

Lecture 3: Populate Head

Lecture 4: Working on the navigation

Lecture 5: Footer and header with style

Lecture 6: Dynamic title

Lecture 7: Sticky footer

Chapter 4: Firebase

Lecture 1: What is Firebase?

Lecture 2: Add Firebase to project

Lecture 3: Dotenv

Lecture 4: Optimise Firebase/Firestore

Lecture 5: Read data from Firestore

Lecture 6: Subscribe to Firestore for realtime changes

Lecture 7: Refactor Firestore

Lecture 8: Read a document from Firestore collection

Chapter 5: Blog project continue

Lecture 1: Blog list and blog item components

Lecture 2: Format date with moment.js

Lecture 3: Show a blog

Lecture 4: SSR with express

Lecture 5: Read a blog from Firestore

Lecture 6: NProgress

Lecture 7: Next.js configuration

Lecture 8: Show a blog continue

Lecture 9: Subscribe to blog content for realtime changes

Lecture 10: Extracting blog to separate component

Lecture 11: Firebase users collection

Lecture 12: User Avatar

Lecture 13: Create a new blog component

Lecture 14: Create a new blog to Firestore

Lecture 15: Toggle edit and view blog

Lecture 16: Fix the memory leak issue

Lecture 17: Edit a blog

Lecture 18: Edit blog with re-base

Lecture 19: Blog edit confirmation

Lecture 20: More refactoring

Lecture 21: Use re-base in home page

Lecture 22: Title and meta tags

Chapter 6: Authentication

Lecture 1: Authenticate with Google

Lecture 2: Authenticate with Facebook, Twitter and Github

Lecture 3: Auth Handler

Lecture 4: Sign in and Sing out from the navigation bar

Lecture 5: Protect routes

Chapter 7: Validation

Lecture 1: Add user dynamically when create blog

Lecture 2: Validate Local storage user

Lecture 3: Validate blog slug

Lecture 4: Update userinfo component

Lecture 5: Show message if user is not valid

Lecture 6: Update Firebase setting to prevent console errors

Lecture 7: Form validation

Chapter 8: Finalising

Lecture 1: Related blogs

Lecture 2: Better way of fetching a blog

Lecture 3: Update Firebase security rules and .env.example file

Lecture 4: What else needs to be done?

Chapter 9: Update 2020 – First reviwe

Lecture 1: Update – Intro

Lecture 2: Update packages

Lecture 3: Update Linting config

Lecture 4: Fix linting issues

Lecture 5: Update Next.js

Lecture 6: More fixes