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 CompTIA Security+ AWS Certified Developer - Associate
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Mindfulness Personal Development Meditation Personal Transformation Life Purpose Coaching Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js 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:

  • 60 hours on-demand video
  • 3 articles
  • 27 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
Development Web Development React

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.
Bestseller
Rating: 4.3 out of 54.3 (740 ratings)
5,937 students
Created by Filip Jerga, Eincode by Filip Jerga
Last updated 11/2020
English
English [Auto]
30-Day Money-Back Guarantee

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
Curated for the Udemy for Business collection

Course content

18 sections • 371 lectures • 60h 13m total length

  • Preview03:33
  • How to get most of this course + resolve issues
    07:59

  • Preview10:53
  • Preview09:59
  • Preview11:01
  • 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

  • Preview02:11
  • 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
  • Debugger Updated!
    05:17
  • 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

  • Preview02:07
  • Auth0 Registration
    08:39
  • Login API Route
    07:49
  • Webpack Dotenv package
    00:09
  • 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

  • Preview03:25
  • 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
  • Note: Revalidate
    00:15
  • Next 9.4 Updates - part 2
    06:41

  • Preview03:07
  • 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

  • Preview02:33
  • 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 a user
    13:03
  • Fix blog by slug
    03:41
  • Get blogs with user
    06:56
  • Display user
    15:07

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

  • Preview03:08
  • 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

  • Legacy Info
    00:09
  • Preview05:59
  • Preview09: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 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.

Featured review

Manot Luijiu
Manot Luijiu
87 courses
15 reviews
Rating: 4.5 out of 5a year ago
Suitable for a student who has zero knowledge about react.js, instructor showing you every workflow step by step, I have a bit frustrating about the font is not big enough. If possible font size would be bigger than 18pt. Udemy please inform teachers about this matter thanks.

Instructors

Filip Jerga
Software Engineer
Filip Jerga
  • 4.5 Instructor Rating
  • 2,882 Reviews
  • 26,619 Students
  • 15 Courses

My name is Filip Jerga and I am an experienced software engineer and freelance developer. I have a Master's degree in Artificial Intelligence and several years of experience working on a wide range of technologies and projects from C++ development for ultrasound devices to modern mobile and web applications in React and Angular.

Throughout my career, I have acquired advanced technical knowledge and the ability to explain programming topics clearly and in detail to a broad audience. I invite you to take my course, where I have put a lot of effort to explain web and software engineering concepts in a detailed, hands-on and understandable way.

Eincode by Filip Jerga
Online Education
Eincode by Filip Jerga
  • 4.5 Instructor Rating
  • 1,496 Reviews
  • 10,973 Students
  • 11 Courses

Eincode ensures to provide the best online learning experience for its audience.

High quality content and programming concepts explained in real-life projects are fields where Eincode shines!

Eincode is covering mainly courses focusing on programming guides for web and mobile development. If you are looking for complete and comprehensive guides then Eincode is the right choice for you.

Courses are also published by instructor Filip Jerga.

Cheers & Keep Coding!

  • 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.