OpenCourser brand icon
Sign in
We may earn an affiliate commission when you visit our partners.
Course image
Udemy logo

Next.js 14 & React - The Complete Guide

Maximilian Schwarzmüller

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.

Read more

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.  :)

Enroll now

Here's a deal for you

We found an offer that may be relevant to this course.
Save money when you learn. All coupon codes, vouchers, and discounts are applied automatically unless otherwise noted.
Use code at checkout. Valid until January 1, 2025
New customers offer
Visit Udemy from OpenCourser as a new customer and claim these savings on your first order.
Up to
80%
off
UDEAFNULP2024

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

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.
Read more
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

Save this course

Save Next.js 14 & React - The Complete Guide to your list so you can find it easily later:
Save

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

Reading list

We've selected seven books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in Next.js 14 & React - The Complete Guide.
Cover image
React Key Concepts
Save
Provides a comprehensive overview of React, including its core concepts, features, and best practices. It valuable resource for both beginners and experienced React developers.
React Key Concepts: Consolidate your knowledge of...
Paperback
$$
React Key Concepts: An in-depth guide to React's...
Kindle Edition
$$
Node.js - The Complete Guide
Save
Provides a comprehensive overview of Node.js, including its core concepts, features, and best practices. It valuable resource for both beginners and experienced Node.js developers.
Node.js - The Complete Guide
Paperback
Check
Node.js - The Complete Guide
Kindle Edition
Check
Cover image
The Road to Firebase
Save
Comprehensive guide to learning React, covering everything from the basics to advanced topics like state management and routing.
The Road to Firebase: Your journey to master...
Paperback
$$
The Road to Firebase: Your journey to master...
Kindle Edition
$$
Cover image
The Talisman of Faerie
Save
Provides an in-depth look at the advanced features of React, including server-side rendering, data fetching, and authentication. It valuable resource for developers who want to take their React skills to the next level.
The Talisman of Faerie
Hardcover
$$
The Talisman of Faerie (The Talisman War Book 1)
Kindle Edition
$
Cover image
GraphQL in Action
Save
Comprehensive guide to using TypeScript with React. It covers everything from the basics of setting up a project to advanced topics like type checking and performance optimization.
GraphQL in Action
Paperback
$$
GraphQL in Action
Kindle Edition
$$
Cover image
Service Dogs
Save
Comprehensive guide to learning React. It covers everything from the basics to advanced topics like state management and routing.
Coloring Book of Service Dogs: By Pawsitivity...
Paperback
$
Coloring Book of Service Dogs: A Fundraiser for...
Paperback
$
Cover image
The Road to GraphQL
Save
Provides a collection of recipes for solving common problems when building Node.js applications. It valuable resource for developers who want to quickly find solutions to their problems.
The Road to GraphQL: Your journey to master...
Paperback
$$

Share

Help others find this course page by sharing it with your friends and followers:
Facebook
LinkedIn
Reddit
X
Link
Email

Similar courses

Here are nine courses similar to Next.js 14 & React - The Complete Guide.
React JS - Mastering Redux
Most relevant
Node with React: Fullstack Web Development
Most relevant
Next JS: The Complete Developer's Guide
Most relevant
React JS Web Development - The Essentials Bootcamp
Most relevant
Building Server-side Rendered React Apps for Beginners
Most relevant
Next.js e React - Curso Completo - Aprenda com Projetos
Most relevant
React 18 with Next.js Playbook
Most relevant
React Hooks Tutorial - Master React Hooks Development
Most relevant
Client Side React Router 4
Most relevant
Course image
Effort
40 total hours
Via
Udemy
Instructor
Maximilian Schwarzmüller
Language
English
Good to know
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
Share and help others discover this course.
Facebook LinkedIn X Reddit Link Email
Don't miss out
Enroll today to gain access to this course
Enroll in this course
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2024 OpenCourser