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

Create portfolio apps using NextJS, with the new "App Router" architecture! Master the latest Next.js, React.js & Node.

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:

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