Complete Next JS with React & Node - Portfolio Apps [2023]

Complete Next JS with React & Node - Portfolio Apps [2023]

Course information

Learn the latest Next.js (v13+), React (v18+) & Node. Build amazing portfolio apps with Next.js. Covers new App Router!

Watch at Academy

What students 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

Requirements

  • Fundamentals in HTML and CSS
  • Basic Javascript knowledge is required

Target Audience

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

Social

Description

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 covers basic concepts. You will learn how React and Next JS work in the background. You will learn all topics on the practical examples.

You will understand the state and props, what a component is, and how the content is rendered out in the browser.

Project 2 - Content Application

  • Covering basic concepts of React and Next JS "Page Architecture."

  • Learning the inner workings of React and Next JS.

  • Exploring topics through practical examples.

  • Understanding state and props.

  • Defining what a component is.

  • Learning how content is rendered in the browser.

What are we going to work on?

Project 1 - Resource Project

This project covers basic concepts. You will learn how React and Next JS work in the background. You will learn all topics on the practical examples.

You will understand the state and props, what a component is, and how the content is rendered out in the browser.

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.

Portfolio Project

  1. Building the Layout:

    • Creating reusable components like navbar and portfolio cards.

    • Explaining server-side rendering and data fetching techniques.

  2. Authentication:

    • Using Auth0 for authentication.

    • User registration, login, and access control.

    • Managing authentication state and making UI changes.

  3. Portfolio Features:

    • Implementing create, update, and delete functionality.

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

  4. Blogging:

    • Creating blogs with a rich text editor.

    • Drafting and publishing blogs.

    • Managing user blogs and SEO.

  5. SEO (Search Engine Optimization):

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

  6. Deployment:

    • Deploying Express API server to Heroku.

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