Complete Next.js with React & Node - Beautiful Portfolio App
4.1 (460 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,417 students enrolled

Complete Next.js with React & Node - Beautiful Portfolio App

Build Serverless Web Apps with Next.js. Learn Hooks. Deploy to Vercel. Next.js (Next 9.4), React (React 16+) & Node.
4.1 (460 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,417 students enrolled
Last updated 5/2020
English
English [Auto-generated]
Current price: $125.99 Original price: $179.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 60 hours on-demand video
  • 1 article
  • 27 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
  • Develop serverless and classical web applications with latest Next JS & React
  • Completely understand the processes and server side part of Next JS
  • Create SEO (Search Engine Optimisation) and Isomorphic Friendly Applications
  • Establish yourself in field of the exciting Next and React web development environment
Course content
Expand all 368 lectures 60:07:30
+ Introduction
2 lectures 11:32
How to get most of this course + resolve issues
07:59
+ PROJECT 1 - Basics
52 lectures 09:22:25
Class Components
05:21
Reusable Components
19:04
Some basics styles
04:58
What is the State
11:21
Let's mutate State
07:41
Common mistakes with State
05:29
State of functional component
10:06
What are props
14:11
How web app works
23:14
Iterate over list of data
19:01
Shorten Function
06:26
Move movie data to Store
07:11
Get movie data + Promises
16:04
Use Effect
12:42
Get movies in class component
06:59
Catch error in Promise
06:30
Get initial props
11:49
More pages, more links
05:49
App container
11:48
App container props
08:57
Detail page of movie
08:43
Get movie by id
11:20
Fix links in detail page
02:41
Finishes detail page
06:22
Get images from movies
06:15
Display cover images
14:58
Get categories
08:10
Modal implementation + Close Modal
09:54
Form to create movie & Containment
06:42
Get values from the form
14:59
Handle genre changes
12:06
Handle form submit
14:19
Close Modal & Uncontrolled data functionality
15:16
Provide ID of movie
07:44
Base server implementation
12:24
More about Server
18:28
Getting movies from server
11:14
Get movie by ID
06:35
Saving movies
14:55
Delete movie
09:21
Edit page for movie
08:07
Provide data to Edit page
14:16
Final touches on Update movies functionality
10:29
Navigation fixes
04:16
Starting with filtering
09:27
Filtering finished
10:32
Styling improvements
17:05
API Endpoints
15:23
Post endpoint
13:50
+ PROJECT 2 - Starter(Serverless)
29 lectures 04:31:05
Project Init
05:59
More pages + Header
09:00
Base Layout
06:32
Styles
13:21
Post Data
08:04
Portfolio Detail
10:03
Get portfolio by ID
04:57
Custom server
15:05
Next routes
08:00
Reactstrap
05:38
Fonts
06:31
Cleanup + Debugging
17:07
Proper layout
07:46
Typed JS
07:22
Header - part 1 rework
12:22
Header - part 2
10:42
Base Page
10:35
Change to functionals components
05:50
Remove _app
06:57
Absolute path
06:08
Login button
04:13
Api functions - part 1
17:33
Api functions - part 2
10:12
Api functions - part 3
14:08
Loading state
03:36
Fetch post by ID
16:02
useSWR
17:12
useSWR by ID
07:59
+ Authentication
20 lectures 03:04:11
Auth0 Registration
08:39
Login API Route
07:49
Env Variables
12:33
Login Screen
09:47
Get login working
08:58
Get User
08:56
Pass user to layout
09:34
Logout
03:01
Secret page
09:49
Redirect
04:23
HOC Start
10:58
withAuth HOC
10:08
Server side props
11:17
Rework server side
04:23
withAuth Server side
21:30
About Roles
11:08
Admin Rights
16:49
Admin SSR
07:53
ENV Variables
04:29
+ Portfolio Feature
44 lectures 07:21:43
API Server
13:23
Git Ignore
00:52
Routes and Controllers
11:09
Mongo DB
17:43
Structural changes in DB
05:39
Create portfolio data
16:12
Populate DB
17:15
Get portfolio by ID
07:18
Get Portfolios
11:02
Portfolio Card
10:05
Base Page Stylings
11:02
Get portfolio server side
10:19
Get static paths
12:44
SSR vs Static
11:53
Portfolio "new" page
08:49
Submit form
08:22
Datepicker
06:04
Handle Dates
13:28
Disable end date
09:25
Api route to create portfolio
11:40
Create portfolio endpoint
09:29
Testing create portfolio
13:36
JWT Middleware
16:39
Get access token
09:18
Create portfolio from App
07:03
Hook function to create portfolio
12:10
Hook creator - Api handler
06:27
Handle Errors
10:19
Portfolio edit page
11:51
Pre-fill form with data
07:05
Update portfolio on Server
08:27
Update on client
14:31
Toast messages
06:51
Handle errors
08:13
Edit and Delete buttons
11:13
Delete on server
04:18
Delete on client
07:57
Delete from state
06:46
Check role on server
10:43
Dropdown menu
10:47
Dropdown menu done
12:53
Next 9.4 Updates - part 1
10:37
Next 9.4 Updates - part 2
06:41
+ Blog Feature
25 lectures 03:53:17
Blog Editor
08:55
Blog Server implementation
11:14
Blog endpoints
10:33
Create blog on server
06:59
Create blog from client
10:44
Redirect to blog update
07:47
Get initial content to blog update
09:59
Update blog on server
09:52
Update blog from client
11:44
Base API
09:38
Dashboard page
14:23
Fetch blogs by user
08:17
Filter blogs
07:59
Dropdown in dashboard
12:10
Generate options
04:45
Slugify title
05:29
Update blog
08:22
Mutate function
11:36
Unique slugs
13:23
Delete blog
06:11
Blog index page
07:34
Display blogs
10:12
Link to blog detail + Dates
08:56
Blog detail page
13:28
+ UX Improvements
13 lectures 02:20:02
Flip the card
18:03
About page
16:23
Dropdown resizing
12:48
Home screen improvements
08:03
Active Links
12:11
CV Page
03:28
Try to get an access token
17:39
Get an access token
10:07
Get an user
13:03
Fix blog by slug
03:41
Get blogs with user
06:56
Display user
15:07
+ SEO
11 lectures 01:43:09
Head title
14:01
Index page type
06:14
Meta description
10:29
Open graph
11:51
Canonical
08:35
Fonts, images, favicon
11:42
More about fonts
03:45
Portfolio detail
12:01
Portfolio detail data
09:34
Change images
12:42
+ Deplyment
10 lectures 01:58:57
Deploying start
16:39
API to heroku
15:18
Deployment to Heroku
14:19
Respond with html page
07:39
Testing with PROD api
16:21
Small fixes
07:27
Deployment to Vercel
16:46
Testing Next.js app
09:22
Course Ending
11:58
+ PROJECT 3 - Starter(Legacy)
18 lectures 02:37:48
Legacy Info
00:09
Base Layout
06:32
Styles
13:21
Post Data
08:04
Portfolio Detail
10:03
Get portfolio by ID
04:57
Custom server
15:05
Next routes
08:00
Reactstrap
05:38
Fonts
06:31
Cleanup + Debugging
17:07
Proper layout
07:46
Typed.js Library
08:40
Header Integration part 1
09:56
Header Integration part 2
07:17
Base Page Component and Default Props
13:43
Requirements
  • No Next js previous knowledge is required!
  • Basic ES6 and Javascript knowledge is required
  • Fundamentals in React, HTML and CSS
Description

Is this course right for you ?

If you are planning to start your career as a developer or you just want to improve your programming skills, then this course is right for you. Learn how to build amazing portfolio website you can share with your colleagues or future employers.

Get all you need to start web development in one course! Start with technologies of Web Development to more advanced topics until your application will be deployed to Heroku or Vercel and accessible online on the internet.

This resource is the only thing you need in order to start Web Development with Next.js , React and Node. During this course you will get confidence and skills required to start your own projects, you will get the right mindset to apply for a developer career and to improve in modern frameworks like Next.js , React.js  and Node.

What is Next.js ?

Next.js is React framework that provides infrastructure and simple development experience  for server side rendered(SSR) application.

  • An intuitive page-based routing system (with support for dynamic routes)

  • Pre-rendering, both static generation (SSG) and server-side rendering (SSR) are supported on a per-page basis

What are we going to work on?

First we are going to integrate base layout of the application. We will brake layout into small pieces and we will create lots of reusable components such as a navbar, portfolio card and many others. I will explain you how server side rendering works, how to use different data fetching techniques and what are the differences and benefits of fetching on server versus client.

First big feature we will be working on, will be authentication. Authentication will be handled by Auth0 provider, nevertheless there will be lot’s work to handle.

Users will be able to register and login and experience features only for authenticated users. You will learn how to restrict access to pages and how to manage authentication state through you application which will results in UI changes of the application layout.

Next we will work on portfolios features. We will implement functionality to create portfolio and I will explain you how to easily manage forms. Then we will take a look on update functionality where I will show you how to populate inputs with existing data. In the end of the section we will work on delete functionality. All of the features will be reactive and updating view in real time and You will learn how to create fast static pages with new Next.js functions.

Blog feature will be the biggest one. Users will be able to create blogs using slate editor that offers different formatting options. Each blog will be saved initially as a draft blog and it will be an user responsibility to publish it. For this purpose we will create dashboard page displaying all user blogs with option to publish or make a draft from the blog. All Published blogs will be highlighted on blogs page and created as static pages assuring better performance. We will create delete and update functionality as well.

Next we will work on SEO(search engine optimisation) improvements. I will explain you basics of SEO and how to get it working with Next.js.

Last section will be covering deployment. Express API server will be deployed to Heroku. Next.js portfolio application will be deployed to serverless Vercel platform which will make our application super fast on internet.

Who this course is for:
  • Starting as well as experienced developers interested in modern frameworks as Next, React and Node.
  • This course is for everyone eager to understand how a javascript frameworks work.
  • Taking this course will enable you explain before difficult concepts to your fellow colleagues in simple way.