Next.js 14 & React - The Complete Guide from Udemy

Update December 2023:

Added a HUGE new section (incl. a completely new demo project) that covers NextJS 14 & the "App Router" in-depth.
Covers React Server Components, Server Actions & more
Covers file upload & storage on S3
Completely updated the "React Refresher" section
No prior NextJS knowledge is required - I'll introduce you to what the "App Router" is in this course.

Join this bestselling NextJS course and learn how to build highly dynamic, super fast and SEO-ready React apps with React & NextJS.

This course covers both the NextJS "App Router" & the "Pages Router" - two different approaches for building fullstack apps with React. And, of course, you'll learn what these two approaches are, why two different approaches exist and how each approach works.

I created the bestselling Udemy course on React, now I'm super excited to share this NextJS with you - an in-depth course about an amazing React framework that allows you to take the next step as a React developer and build real, production-ready projects with React and Next.js.

Next.js is the production-ready, fullstack-capable framework for ReactJS - the most popular JavaScript library you can learn these days.

Too many buzzwords for your taste?

Fair enough - but indeed, NextJS is a great choice for growing as a React developer and for taking your React apps to the next level.

Because NextJS is growing fast and therefore in high demand. And there are good reasons for that: NextJS allows you to build React apps with built-in server-side rendering and page pre-rendering. Building great user experiences and search engine friendly (SEO. ) React apps has never been easier.

In addition, NextJS makes building fullstack React apps (frontend + backend code combined in one project) extremely easy as well. Blend client-side and server-side code and build a NodeJS-based API side-by-side with your frontend React apps. It's a breeze with NextJS.

Want to add authentication? NextJS simplifies that as well and makes user signup, sign in and session management very convenient.

This course will take you from NextJS beginner to advanced level in no time.

We'll start at the very basics, no NextJS knowledge is required at all, and we'll then dive into all the core features that make up NextJS. Both in theory as well as with multiple real projects where all concepts will be applied step-by-step.

For this course, you'll need basic React knowledge, though the course does come with a "React refresher" module in case it's been some time since you last worked with React.

This course also includes a "NextJS Summary" module for the Pages router and a "NextJS Essentials" module for the App router - which allow you to always come back to the course in the future and refresh your knowledge without going through the full course again. Or you just take those summary modules (and skip the rest for now) to learn about all the core features in as little time as possible.

After finishing this course, you'll be well prepared to build your own NextJS projects from the ground up and apply for NextJS positions.

In detail, this course will cover:

What is NextJS? And why would you use it?
Why is just React (in many cases) not enough?
Creating NextJS projects from the ground up & understanding these projects
Working with file-based routing
Adding dynamic routes and catch-all routes
Implementing different forms of page pre-rendering and server-side rendering
Working with data and adding data fetching + pre-fetching to your apps
Handling form submissions with Server Actions
Handling File upload
Pre-generating dynamic and static pages
Adding optimizations like metadata to pages
Optimizing images with the NextJS Image component
Building fullstack apps with API routes or Server Actions
Managing app-wide state with React context (in NextJS apps)
Adding authentication to NextJS apps
Multiple complete apps where we'll apply all these core concepts.
A complete React.js refresher module (so that we're all on the same page)
A NextJS summary module so that you can refresh what you learned or just explore the core features quickly
And much more.

I can't wait to start this journey together with you. :)

What's inside

Learning objectives

Learn how to build fullstack react apps with nextjs 14 & the app router
Build real projects and apply what you learned with hands-on projects and examples
Learn about different ways of building nextjs app - app router vs pages router
Get started with react server components, client components, data fetching & more!

Handle data submissions via server actions
Learn all key nextjs features like pre-rendering, ssr, data fetching, file-based routing and authentication
Take the full course or the "nextjs summary" module for a quickstart if you have limited time

Learn how to build fullstack react apps with nextjs 14 & the app router
Build real projects and apply what you learned with hands-on projects and examples
Learn about different ways of building nextjs app - app router vs pages router
Get started with react server components, client components, data fetching & more!
Handle data submissions via server actions
Learn all key nextjs features like pre-rendering, ssr, data fetching, file-based routing and authentication
Take the full course or the "nextjs summary" module for a quickstart if you have limited time

Syllabus

Learn what Next.js is all about, why it's a great addition to React.js, why you should consider using both NextJS and ReactJS and what the core features of NextJS are.

Welcome To The Course!

What Is NextJS? Why Would You Use It?

Key Features & Benefits Of NextJS

Creating a First NextJS App

NextJS vs "Just React" - Analyzing The NextJS Project

Editing The First App

Pages Router vs App Router - One Framework, Two Approaches

How To Get The Most Out Of This Course

Learning Community & Course Resources

This module is optional. Ensure that we're all on the same page by going through all key React features and fundamentals again: Components, props, state, events, context, routing & more.

Using the Code Snasphots

Module Introduction

What Is React & Why Would You Use It?

React Projects - Requirements

Creating React Projects

Our Starting Project

Understanding How React Works

Building A First Custom Component

Outputting Dynamic Values

Reusing Components

Passing Data to Components with Props

CSS Styling & CSS Modules

Exercise & Another Component

Preparing the App For State Management

Adding Event Listeners

Working with State

Lifting State Up

The Special "children" Prop

State & Conditional Content

Adding a Shared Header & More State Management

Adding Form Buttons

Handling Form Submission

Updating State Based On Previous State

Outputting List Data

Adding a Backend to the React SPA

Sending a POST HTTP Request

Handling Side Effects with useEffect()

Handle Loading State

Understanding & Adding Routing

Adding Routes

Working with Layout Routes

Refactoring Route Components & More Nesting

Linking & Navigating

Data Fetching via loader()s

Submitting Data with action()s

Dynamic Routes

Module Summary

IMPORTANT -- LEGACY CONTENT BELOW

What is ReactJS?

Why ReactJS & A First Demo

Building Single-Page Applications (SPAs)

React Alternatives

Creating a New React Project

Setting Up A Code Editor

React 18

Diving Into The Created Project

How React Works & Understanding Components

More Component Work & Styling With CSS Classes

Building & Re-using Components

Passing Data With Props & Dynamic Content

Handling Events

Adding More Components

Introducing State

Working with "Event Props"

Use The Right React Router Version

Adding Routing

Adding Links & Navigation

Scoping Component Styles With CSS Modules

Outputting Lists Of Data & Components

Adding Even More Components

Creating "Wrapper" Components

Working With Forms

Getting User Input & Handling Form Submission

Preparing The App For Http Requests & Adding a Backend

Sending a POST Http Request

Navigating Programmatically

Getting Started with Fetching Data

Using the "useEffect" Hook

Introducing React Context

Using Context In Components

More Context Usage

Module Resources

Get started with the core NextJS concepts you must know & learn about the App Router, how to add routes, page rendering, React Server Components vs Client Components, Data Fetching & Server Actions

Starting Setup

Understanding File-based Routing & React Server Components

Adding Another Route via the File System

Navigating Between Pages - Wrong & Right Solution

Working with Pages & Layouts

Reserved File Names, Custom Components & How To Organize A NextJS Project

Reserved Filenames

Configuring Dynamic Routes & Using Route Parameters

Onwards to the Main Project: The Foodies App

Exercise: Your Task

Exercise: Solution

Revisiting The Concept Of Layouts

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Covers highly-relevant industry standard technologies React & NextJS

Develops core and essential web development skills

Taught by recognized experts in React and NextJS

Provides a foundation for intermediate-level React developers

Requires some React experience and knowledge

May require additional software and subscriptions

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Next.js 14 & React - The Complete Guide with these activities:

Connect with Experienced Developers

Show steps

Seek guidance and support from experienced NextJS developers to enhance your learning journey.

Show steps

Attend industry events and meetups to connect with potential mentors.
Reach out to developers on platforms like LinkedIn and GitHub.
Ask for recommendations from peers or instructors.

Create a Resource Collection

Show steps

Gather and organize resources related to the course to facilitate your learning journey.

Show steps

Identify and gather relevant articles, tutorials, videos, and other materials.
Organize the resources into categories or topics to make them easy to find.
Use a tool or platform to create a central repository for the resources.
Add summaries or notes to each resource to enhance your understanding.

Review React Fundamentals

Show steps

Brush up on the essential concepts of React to ensure a smoother transition into learning NextJS.

Browse courses on React

Show steps

Review the core concepts of React, including components, props, and state management.
Build a simple React application to reinforce your understanding.
Practice working with React hooks for state management and lifecycle methods.
Create a React project from scratch and set up the basic structure.
Learn about different ways to style React components.

Five other activities

Expand to see all activities and additional details

Show all eight activities

Study Group with Peers

Show steps

Join or create a study group to collaborate and exchange knowledge with fellow learners.

Show steps

Find or form a study group with other students taking the course.
Regularly meet to discuss course material, share notes, and solve problems together.
Take turns leading discussions and presenting concepts to reinforce understanding.

Attend NextJS Workshops

Show steps

Participate in NextJS workshops to gain practical experience and deepen your understanding.

Show steps

Research and identify relevant NextJS workshops.
Register for workshops that align with your learning goals.
Actively participate in the workshops, ask questions, and take notes.
Apply the skills and knowledge gained from the workshops to your own projects.

Dynamic Routing Practice

Show steps

Gain hands-on experience with NextJS dynamic routing to solidify your understanding of this core concept.

Browse courses on Dynamic Routing

Show steps

Create a NextJS project and add dynamic routes to it.
Pass dynamic parameters to React components and display them.
Practice working with different types of dynamic routes and patterns.
Implement route-based data fetching to populate dynamic pages.

Contribute to Open Source Projects

Show steps

Engage with the open source community and gain hands-on experience in a real-world setting.

Show steps

Find open source projects related to NextJS or React.
Review the project documentation and identify areas where you can contribute.
Submit code contributions or help with issue tracking and community support.
Engage with the project maintainers and learn from their expertise.

Build a Personal Portfolio Website

Show steps

Create a fully functional personal portfolio website using NextJS to showcase your skills and projects, solidifying your understanding of fullstack development.

Browse courses on Fullstack Development

Show steps

Plan the structure and design of your portfolio website.
Build the frontend interface using React and NextJS.
Implement backend functionality for data management and API integration.
Add features such as project display, contact form, and social media integration.
Deploy the website to a hosting platform and optimize it for performance.

Career center

Learners who complete Next.js 14 & React - The Complete Guide will develop knowledge and skills that may be useful to these careers:

Front-End Engineer

Front End Engineers deal with the user interface (UI) portion of software. They implement the visual elements of a product, such as its layout and graphics. These engineers ensure that the UI is both visually appealing and user-friendly. NextJS is a framework that provides the tools and features needed to build complex user interfaces efficiently. By learning about NextJS, you will be able to enhance your skills as a Front End Engineer and create engaging user experiences.

See salaries and explore the career path for Front-End Engineer

Full-Stack Developer

Full Stack Developers are responsible for both the front end and back end of a software product. They work with both the UI and the code that makes the UI work. As a Full Stack Developer, you will need to have a strong understanding of both front end and back end frameworks and technologies. NextJS is a full-stack framework that allows you to build both the UI and the back end of your application. By learning about NextJS, you will be able to improve your skills as a Full Stack Developer and create more robust and efficient web applications.

See salaries and explore the career path for Full-Stack Developer

Web Developer

Web Developers are responsible for the design, development, and maintenance of websites. They work with a variety of technologies, including HTML, CSS, JavaScript, and server-side languages such as PHP and Python. NextJS is a web development framework that makes it easy to build fast, scalable, and SEO-friendly websites. By learning about NextJS, you can enhance your skills as a Web Developer and create more engaging and effective websites.

See salaries and explore the career path for Web Developer

React Developer

React Developers are responsible for building the user interface (UI) of web and mobile applications. They use the React framework, a popular JavaScript library, to create interactive and responsive UIs. NextJS is a React framework that provides the tools and features needed to build complex user interfaces efficiently. By learning about NextJS, you will be able to improve your skills as a React Developer and create engaging user experiences.

See salaries and explore the career path for React Developer

Node.js Developer

Node.js Developers are responsible for building server-side applications using Node.js, a popular JavaScript runtime environment. They use Node.js to create scalable and efficient applications. NextJS is a full-stack framework that allows you to build both the UI and the back end of your application. The back end of NextJS applications is built using Node.js. By learning about NextJS, you will be able to improve your skills as a Node.js Developer and create more robust and efficient web applications.

See salaries and explore the career path for Node.js Developer

UI Developer

UI Developers are responsible for the design and development of the user interface (UI) for software products. They work with designers and engineers to create UIs that are both visually appealing and user-friendly. NextJS is a UI development framework that makes it easy to build fast, scalable, and SEO-friendly UIs. By learning about NextJS, you will be able to improve your skills as a UI Developer and create more engaging user experiences.

See salaries and explore the career path for UI Developer

Software Engineer

Software Engineers are responsible for the design, development, and maintenance of software systems. They work with a variety of technologies, including programming languages, databases, and operating systems. NextJS is a popular framework for building web applications. By learning about NextJS, you will be able to enhance your skills as a Software Engineer and create more powerful and efficient software systems.

See salaries and explore the career path for Software Engineer

Web Designer

Web Designers are responsible for the visual appearance of websites. They work with clients to create websites that are both visually appealing and user-friendly. NextJS is a web development framework that makes it easy to build fast, scalable, and SEO-friendly websites. By learning about NextJS, you can enhance your skills as a Web Designer and create more engaging and effective websites.

See salaries and explore the career path for Web Designer

Backend Engineer

Backend Engineers are responsible for the design and development of the back end of software products. They work with databases, servers, and other technologies to create the infrastructure that supports the user interface. NextJS is a full-stack framework that allows you to build both the UI and the back end of your application. The back end of NextJS applications is built using Node.js. By learning about NextJS, you will be able to improve your skills as a Backend Engineer and create more robust and efficient web applications.

See salaries and explore the career path for Backend Engineer

Web Programmer

Web Programmers are responsible for writing code for websites and web applications. They work with a variety of technologies, including HTML, CSS, JavaScript, and server-side languages such as PHP and Python. NextJS is a web development framework that makes it easy to build fast, scalable, and SEO-friendly websites. By learning about NextJS, you can enhance your skills as a Web Programmer and create more engaging and effective websites.

See salaries and explore the career path for Web Programmer

Software Developer

Software Developers are responsible for the design, development, and maintenance of software systems. They work with a variety of technologies, including programming languages, databases, and operating systems. NextJS is a popular framework for building web applications. By learning about NextJS, you will be able to enhance your skills as a Software Developer and create more powerful and efficient software systems.

See salaries and explore the career path for Software Developer

Full-Stack Web Developer

Full Stack Web Developers are responsible for both the front end and back end of web applications. They work with both the UI and the code that makes the UI work. As a Full Stack Web Developer, you will need to have a strong understanding of both front end and back end frameworks and technologies. NextJS is a full-stack framework that allows you to build both the UI and the back end of your application. By learning about NextJS, you can enhance your skills as a Full Stack Web Developer and create more robust and efficient web applications.

See salaries and explore the career path for Full-Stack Web Developer

JavaScript Developer

JavaScript Developers are responsible for writing JavaScript code for web and mobile applications. They use JavaScript to create interactive and responsive UIs. NextJS is a React framework that provides the tools and features needed to build complex user interfaces efficiently. By learning about NextJS, you can improve your skills as a JavaScript Developer and create engaging user experiences.

See salaries and explore the career path for JavaScript Developer

Web Application Developer

Web Application Developers are responsible for the design, development, and maintenance of web applications. They work with a variety of technologies, including HTML, CSS, JavaScript, and server-side languages such as PHP and Python. NextJS is a web development framework that makes it easy to build fast, scalable, and SEO-friendly web applications. By learning about NextJS, you can enhance your skills as a Web Application Developer and create more engaging and effective web applications.

See salaries and explore the career path for Web Application Developer

React Native Developer

React Native Developers are responsible for building native mobile applications using React. React Native is a framework that allows you to build mobile applications using JavaScript. NextJS is a React framework that provides the tools and features needed to build complex user interfaces efficiently. By learning about NextJS, you can improve your skills as a React Native Developer and create engaging user experiences for mobile applications.

See salaries and explore the career path for React Native Developer

Next.js 14 & React - The Complete Guide

12 deals to help you save

What's inside

Learning objectives

Syllabus

Good to know

Save this course

Activities

Career center

Reading list

Share

Similar courses