Complete Next.js with React Node Portfolio Apps [2023]

Complete Next.js with React & Node – Portfolio Apps [2023], available at $74.99, has an average rating of 3.85, with 301 lectures, based on 1172 reviews, and has 10831 subscribers.

You will learn about Develop web applications with the latest Next JS & React Understand web concepts clearly by creating real-world applications Create SEO (Search Engine Optimisation) and Isomorphic Friendly Applications Establish yourself in field of the exciting Next and React web development environment This course is ideal for individuals who are Starting as well as experienced developers interested in modern frameworks as Next, React and Node. or This course is for everyone eager to understand how a javascript frameworks work. or Taking this course will enable you explain before difficult concepts to your fellow colleagues in simple way. It is particularly useful for Starting as well as experienced developers interested in modern frameworks as Next, React and Node. or This course is for everyone eager to understand how a javascript frameworks work. or Taking this course will enable you explain before difficult concepts to your fellow colleagues in simple way.

Enroll now: Complete Next.js with React & Node – Portfolio Apps [2023]

Summary

Title: Complete Next.js with React & Node – Portfolio Apps [2023]

Price: $74.99

Average Rating: 3.85

Number of Lectures: 301

Number of Published Lectures: 301

Number of Curriculum Items: 301

Number of Published Curriculum Objects: 301

Original Price: 129.99

Quality Status: approved

Status: Live

What You Will Learn

Develop web applications with the latest Next JS & React

Understand web concepts clearly by creating real-world applications

Create SEO (Search Engine Optimisation) and Isomorphic Friendly Applications

Establish yourself in field of the exciting Next and React web development environment

Who Should Attend

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.

Target Audiences

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.

Is this course right for you?

If you plan to start your career as a developer or improve your programming skills, this course is right for you. Learn how to build a fantastic portfolio website you can share with your colleagues or future employers.

Get all you need to start web development in one course! Start with web development technologies and move to more advanced topics until your application is deployed to Heroku or Vercel and accessible online on the internet. This course covers the latest topics and React JS and Next JS versions.

Course Structure is the following:

[Project 1]: Resource Application (Beginners)

[Project 2]: Content Application (Beginners)

[Project 3]: Portfolio Application (Beginners/Intermediate)

What is Next.js?

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

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?

Project 1 – Resource Project

This project is designed to provide a comprehensive understanding of fundamental concepts in web development.

You will grasp the concept of state, which represents the dynamic data within a React component, and learn how to manage it effectively.

Understanding props, which pass data from one component to another, is a key part of this project.

You will understand comprehensively what a component is in the context of React and how to create and use them in your applications.

The primary focus is on React and Next JS, two popular JavaScript libraries/frameworks for building modern web applications.

Project 2 – Content Application

Learn the latest Next.js 13’s “App Architecture.”

Explore recent changes in React and Next.js.

Build a content application for managing portfolios and blogs in markdown format.

Discover new API functions.

Understand project organization.

Gain insight into how these frameworks work.

Project 3 – Extensive Portfolio Project

1. Building the Layout:

2. Creating reusable components like navbar and portfolio cards.

3. Explaining server-side rendering and data fetching techniques.

4. Authentication:

5. Using Auth0 for authentication.

6. User registration, login, and access control.

7. Managing authentication state and making UI changes.

8. Portfolio Features:

9. Implementing create, update, and delete functionality.

10. Real-time updates and fast static pages with Next.js.

11. Blogging:

12. Creating blogs with a rich text editor.

13. Drafting and publishing blogs.

14. Managing user blogs and SEO.

15. SEO (Search Engine Optimization):

16. Basics of SEO and integrating it with Next.js.

17. Deployment:

18. Deploying Express API server to Heroku.

19. Deploying Next.js portfolio app to Vercel to be accessible on the internet.

Course Curriculum

Chapter 1: Introduction

Lecture 1: Project Overview

Lecture 2: How to resolve issues + Project structure

Lecture 3: Update Announcement

Lecture 4: Page vs App Init

Chapter 2: [Project 1]: Init the Project

Lecture 1: Project Introduction

Lecture 2: Project initialisation

Lecture 3: Folder Structure

Lecture 4: _app Component

Lecture 5: Components

Lecture 6: Class components

Lecture 7: JSX

Lecture 8: Arrow Functions

Chapter 3: [Project 1]: State & Props

Lecture 1: State

Lecture 2: Increment state

Lecture 3: Change state

Lecture 4: Class state

Lecture 5: Props

Lecture 6: Use effect

Lecture 7: Class props

Lecture 8: How web apps work

Lecture 9: More about props

Chapter 4: [Project 1]: Layout

Lecture 1: Bulma css

Lecture 2: Separation into components

Lecture 3: Absolute path

Lecture 4: Layout

Lecture 5: Resource data

Lecture 6: Highlight list

Lecture 7: Resource list

Chapter 5: [Project 1]: Data fetching

Lecture 1: Api functions

Lecture 2: Get static props

Lecture 3: Get static vs get server side props

Lecture 4: [Server] Api app

Lecture 5: [Server] Api endpoints

Lecture 6: [Server] Get resources from API

Lecture 7: Get data from 3001

Lecture 8: Cors and Proxy

Chapter 6: [Project 1]: Forms & Create Resource

Lecture 1: Important! Next 13 Updates

Lecture 2: Resource new page

Lecture 3: Resource form

Lecture 4: More inputs

Lecture 5: Form values

Lecture 6: Form Submit

Lecture 7: Handle title change

Lecture 8: Handle all inputs change

Chapter 7: [Project 1]: Post Request

Lecture 1: Send a post request

Lecture 2: Attach data in the request

Lecture 3: Axios

Lecture 4: Validate data

Lecture 5: Catching error

Lecture 6: [Server] post endpoint

Lecture 7: [Server] finishing post endpoint

Lecture 8: Handling post request in API

Lecture 9: Redirect after create

Chapter 8: [Project 1]: Resource Details

Lecture 1: [Server] get resource by ID endpoint

Lecture 2: Resource detail page

Lecture 3: Resource page fetch data

Lecture 4: Link to detail page

Lecture 5: Get Initial Props

Lecture 6: Get static paths

Lecture 7: Fallback true

Lecture 8: Revalidate

Chapter 9: [Project 1]: Resource Edit

Lecture 1: Resource edit page

Lecture 2: Resource Form Component

Lecture 3: Resource Edit Form

Lecture 4: Resource Patch API endpoint

Lecture 5: [Server] Patch Endpoint

Chapter 10: [Project 1]: Active Resource

Lecture 1: Active resource component

Lecture 2: Active resource patch request

Lecture 3: [Server] Activate resource

Lecture 4: [Server] Active resource endpoint

Lecture 5: Fetch active resource in next

Lecture 6: Time to finish in seconds

Lecture 7: Seconds state

Chapter 11: [Project 1]: UX Improvements

Lecture 1: UX improvements

Lecture 2: Complete resource

Lecture 3: [Server] Forbid update of not complete resource

Lecture 4: Resource Status

Lecture 5: Resource status color

Lecture 6: Display buttons on inactive ones

Lecture 7: Env variables

Chapter 12: [Project 1]: Deployment

Lecture 1: Git & Heroku

Lecture 2: Pushing Code to Github

Lecture 3: Deploying to Heroku

Lecture 4: Production env file

Lecture 5: Deployment To Vercel

Chapter 13: [Project 2]: Init the Project

Lecture 1: Init the project

Lecture 2: File Removal

Instructors

Filip Jerga
Software Engineer

Eincode by Filip Jerga
Online Education

Rating Distribution

1 stars: 25 votes

2 stars: 42 votes

3 stars: 123 votes

4 stars: 340 votes

5 stars: 642 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!