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.

Traffic lights

Read about what's good

what should give you pause

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

Reviews summary

Comprehensive next.js 14 & react guide

According to students, this course is a comprehensive and highly current guide to Next.js 14 and React, particularly praised for its in-depth coverage of the App Router, Server Components, and Server Actions. Learners consistently highlight the instructor's clear and concise explanations, making complex topics digestible. The inclusion of practical, hands-on projects and a React refresher module is frequently noted as a significant strength. While some found the pace challenging at times, particularly for advanced concepts, the course is widely regarded as excellent for building production-ready applications.

Teaches both App Router and Pages Router approaches, offering flexibility.

"The course thoughtfully covers both the App Router and the Pages Router, which is great for understanding different project needs."

"I liked having both routing paradigms explained; it gave me a broader perspective on Next.js development."

"It's helpful that it explains the differences and use cases for Pages vs. App Router clearly."

Instructor actively updates content based on feedback and framework changes.

"It's great to see the course being actively updated with the latest Next.js versions and features, demonstrating a commitment to quality."

"The recent updates show the instructor listens to feedback and keeps the material current, which is essential for a fast-moving framework."

"I appreciate the consistent updates; it makes the investment in this course feel worthwhile as the tech evolves."

Hands-on projects reinforce learning and build real-world skills.

"The hands-on projects, especially the Foodies app, were instrumental in applying what I learned and building confidence."

"I love that this course is project-based; it helped solidify my understanding of how all the pieces fit together."

"The practical examples given throughout the course are very useful for understanding how to use Next.js in real projects."

Covers the latest Next.js 14 features, including App Router and RSCs.

"I appreciate how up-to-date the course is with Next.js 14 and the App Router, which is crucial for modern development."

"The new sections on Server Components and Server Actions really bring this course to the forefront of Next.js learning."

"Finally, a course that dives deep into the App Router properly! It's so relevant for current projects."

Instructor excels at breaking down complex topics into understandable segments.

"The instructor's explanations are incredibly clear, even for complex topics like Server Components and data fetching."

"I found the course well-structured, making it easy to follow along and grasp difficult Next.js concepts."

"The way he explains concepts, especially the App Router, simplifies things that were previously confusing to me."

Some learners found the pace challenging, especially without strong React basics.

"While excellent, I felt the course sometimes moved a bit fast, especially if my React knowledge wasn't perfectly solid."

"I found myself rewatching sections to keep up, as the amount of new information was quite dense at times."

"Even with the React refresher, a very strong grasp of React fundamentals is recommended to fully keep pace."

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

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

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

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

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

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

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

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

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