Top 8 Recommended Next.js Self-Study Materials! [November 2024]

** Just launched 16 BONUS hours of Next.js content in May 2024!

** Take this course after taking my #1 bestselling JavaScript course (900,000+ students)

In 2024, React is still the #1 skill to learn if you want to become a successful front-end developer!

But it can be hard. There are so many moving parts, so many different libraries, so many tutorials out there.

That's why you came here... And you came to the right place! This is THE ultimate React course for 2024 and beyond.

A practice-heavy approach to master React by building polished apps, backed up by diagrams, theory, and looks under the hood of React.

The all-in-one package that takes you from zero to truly understanding React and building modern, powerful, and professional web applications.

Real projects. Real explanations. Real React.

[01] Why is this the right React course for you?

This is the most epic React (+ Next.js) course on Udemy, and it's fundamentally different from all the other ones.

Here's why:

• Contains the biggest and most professional project, where we implement many common app features (see promo video!)

• Super detailed explanations of all important concepts with carefully crafted and animated diagrams

• A huge focus on "how to think in React" and modern best practices

• A long section that explores how React actually works behind the scenes will give you the confidence to use React effectively on your own

• Advanced design patterns like compound components will make you think like a senior React engineer

• Many sections (16 hours!) on Next.js with the modern "app" router (with React Server Components and Server Actions)

And these are just the highlights! Check out the full list below (+ the promo video and curriculum).

Also, make no mistake: "React course" actually means "Front-end development with React and modern libraries course".

That's right, besides the React library itself, you will learn and master them all: React Router, Redux, Redux Toolkit, React Query, React Hook Form, Styled Components, Tailwind CSS, Next.js, and more.

This is how we plan, build, and deploy professional projects! We even use industry-standard tools such as Supabase (fully-fledged back-end), GitHub, Netlify, and Vercel.

As you expect, this course is 100% project-based. So throughout the course, you'll start building your portfolio of 10+ beautiful and high-quality React apps, where each one will showcase a few of the new skills you will be learning.

By the end of the course, you will have all the knowledge and confidence that you need to ace your job interviews and become the professional React developer that companies are looking for.

[02] Why am I the right React teacher for you?

My name is Jonas, I'm an experienced web developer and designer, and one of Udemy's top instructors. I've been teaching web development courses since 2015 to over 1,900,000 developers, so I know exactly how students learn and what is needed to master any subject.

With this in mind, I designed the ideal curriculum for this course: a unique blend of real-world projects, deep explanations, and theory lectures, to turn you into a confident React and Next.js developer in just a couple of weeks.

Ready to become a confident and independent React + Next.js developer, highly capable of building your own apps? Then don't wait any longer, and start your React journey today!

[03] Still not sure? Here are all the nerdy details of what we'll cover:

• React fundamentals [why we even need React, components, JSX, props, events, forms, state, props vs. state]

• How to think about state [where to place state, guidelines, lifting state up, local vs. global state, UI vs. remote state]

• How to think about components [how to split components, props as API, how to build reusable and composable components, the children prop]

• Deep dive into effects and useEffect [data fetching, lifecycle vs. synchronization, when to use effects, effects vs. event handlers]

• Deep dive into hooks [rules of hooks, how hooks work, useRef, building super-reusable custom hooks]

• Performance optimization [wasted renders, memoization with memo, useMemo, and useCallback, optimizing Context API, code splitting + Suspense]

• Advanced state management [useReducer hook, the Context API, Redux, Redux Toolkit, Thunks, React Query]

• Building Single-Page Applications (SPA) [Vite, routing with React Router, URL parameters and query strings for state management, data loaders and actions (v6.4+)]

• Building real-world features found in many apps [authentication and authorization, data sorting, filtering and pagination, dark mode, dashboard with charts, etc.]

• Creating your own back-end with a DB and API using Supabase [gain the power to build full-stack apps on your own!]

• How to style React apps [Tailwind CSS, CSS Modules, and Styled Components]

• Advanced React patterns used by senior developers [render props, higher-order components, compound components (to build a modal, a context menu, and more)]

• How React works behind the scenes [rendering, virtual DOM, reconciliation, fiber tree, key prop, events, state batching, etc.]

• Next.js with the "app" router, React Server Components, and Server Actions [server-side rendering, static vs. dynamic rendering, state management between server and client, data loading strategies, streaming, caching, image and font optimization, authentication with NextAuth, modern React hooks (useFormState and useOptimistic)]

[04] By signing up today, you'll also get:

• Up-to-date HD-quality videos, that are easy to search and reference (great for Udemy Business learners)

• Downloadable slides PDF for 70+ theory videos (not boring, I promise!)

• Professional English captions (not auto-generated)

• Downloadable assets and starter and final code for each project

• Free and fast support in the course Q&A

• 10+ challenges and exercises to practice your skills (solutions included)

1. Welcome, Welcome, Welcome!
2. Course Roadmap and Projects
3. Building Our First React App!
4. Watch Before You Start!
5. Read Before You Start!
6. Downloading Course Material
7. PART 1: REACT FUNDAMENTALS [4 PROJECTS]
8. Introduction to Part 1
9. Useful Resources for Part 1
10. A First Look at React
11. Section Overview
12. Why Do Front-End Frameworks Exist?
13. React vs. Vanilla JavaScript
14. What is React?
15. Setting Up Our Development Environment
16. Pure React
17. A Quick Look at React's Official Documentation
18. Setting Up a New React Project: The Options
19. Setting Up a Project With Create-React-App
20. [Optional] Review of Essential JavaScript for React
21. Section Overview
22. Destructuring Objects and Arrays
23. Rest/Spread Operator
24. Template Literals
25. Ternaries Instead of if/else Statements
26. Arrow Functions
27. Short-Circuiting And Logical Operators: &&, ||, ??
28. Optional Chaining
29. The Array map Method
30. The Array filter Method
31. The Array reduce Method
32. The Array sort Method
33. Working With Immutable Arrays
34. Asynchronous JavaScript: Promises
35. Asynchronous JavaScript: Async/Await
36. Working With Components, Props, and JSX
37. Section Overview
38. Rendering the Root Component and Strict Mode
39. Before We Start Coding: Debugging
40. Components as Building Blocks
41. Creating And Reusing a Component
42. What is JSX?
43. Creating More Components
44. JavaScript Logic in Components
45. Separation of Concerns
46. Styling React Applications
47. Passing and Receiving Props
48. Props, Immutability, and One-Way Data Flow
49. CHALLENGE #1: Profile Card (v1)
50. The Rules of JSX
51. Rendering Lists
52. Conditional Rendering With &&
53. Conditional Rendering With Ternaries
54. Conditional Rendering With Multiple Returns
55. Extracting JSX Into a New Component
56. Destructuring Props
57. React Fragments
58. Setting Classes and Text Conditionally
59. Section Summary
60. CHALLENGE #2: Profile Card (v2)
61. State, Events, and Forms: Interactive Components
62. Section Overview
63. Let's Build a Steps Component
64. Handling Events the React Way
65. What is State in React?
66. Creating a State Variable With useState
67. Don't Set State Manually!
68. The Mechanics of State
69. Adding Another Piece of State
70. React Developer Tools
71. Updating State Based on Current State
72. More Thoughts About State + State Guidelines
73. A Vanilla JavaScript Implementation
74. CHALLENGE #1: Date Counter (v1)
75. Starting a New Project: The "Far Away" Travel List
76. Building the Layout
77. Rendering the Items List
78. Building a Form and Handling Submissions
79. Controlled Elements
80. State vs. Props
81. EXERCISE #1: Flashcards
82. CHALLENGE #2: Date Counter (v2)
83. Thinking In React: State Management
84. Section Overview
85. What is "Thinking in React"?
86. Fundamentals of State Management
87. Thinking About State and Lifting State Up
88. Reviewing "Lifting Up State"
89. Deleting an Item: More Child-to-Parent Communication!
90. Updating an Item: Complex Immutable Data Operation
91. Derived State
92. Calculating Statistics as Derived State
93. Sorting Items
94. Clearing the List
95. Moving Components Into Separate Files
96. EXERCISE #1: Accordion Component (v1)
97. The "children" Prop: Making a Reusable Button
98. More Reusability With the "children" Prop
99. EXERCISE #2: Accordion Component (v2)
100. CHALLENGE #1: Tip Calculator
101. [Optional] Practice Project: Eat-'N-Split
102. Section Overview
103. Project Setup
104. Building the Static App: List of Friends
105. Building the Static App: Forms
106. Displaying the New Friend Form
107. Adding a New Friend
108. Selecting a Friend
109. Creating Controlled Elements
110. Splitting a Bill
111. PART 2: INTERMEDIATE REACT [2 PROJECTS]
112. Introduction to Part 2
113. Useful Resources for Part 2
114. Thinking in React: Components, Composition, and Reusability
115. Section Overview
116. Setting Up the "usePopcorn" Project
117. How to Split a UI Into Components
118. Splitting Components in Practice
119. Component Categories
120. Prop Drilling
121. Component Composition
122. Fixing Prop Drilling With Composition (And Building a Layout)
123. Using Composition to Make a Reusable Box
124. Passing Elements as Props (Alternative to children)
125. Building a Reusable Star Rating Component
126. Creating the Stars
127. Handling Hover Events
128. Props as a Component API
129. Improving Reusability With Props
130. PropTypes
131. CHALLENGE #1: Text Expander Component
132. How React Works Behind the Scenes
133. Section Overview
134. Project Setup and Walkthrough
135. Components, Instances, and Elements
136. Instances and Elements in Practice
137. How Rendering Works: Overview
138. How Rendering Works: The Render Phase
139. How Rendering Works: The Commit Phase
140. How Diffing Works
141. Diffing Rules in Practice
142. The Key Prop
143. Resetting State With the Key Prop
144. Using the Key Prop to Fix Our Eat-'N-Split App
145. Rules for Render Logic: Pure Components
146. State Update Batching
147. State Update Batching in Practice
148. How Events Work in React
149. Libraries vs. Frameworks & The React Ecosystem
150. Section Summary: Practical Takeaways
151. Effects and Data Fetching
152. Section Overview
153. The Component Lifecycle
154. How NOT to Fetch Data in React
155. useEffect to the Rescue
156. A First Look at Effects
157. Using an async Function
158. Adding a Loading State
159. Handling Errors
160. The useEffect Dependency Array
161. Synchronizing Queries With Movie Data
162. Selecting a Movie
163. Loading Movie Details
164. Adding a Watched Movie
165. Adding a New Effect: Changing Page Title
166. The useEffect Cleanup Function
167. Cleaning Up the Title
168. Cleaning Up Data Fetching
169. One More Effect: Listening to a Keypress
170. CHALLENGE #1: Currency Converter
171. Custom Hooks, Refs, and More State
172. Section Overview
173. React Hooks and Their Rules
174. The Rules of Hooks in Practice
175. More Details of useState
176. Initializing State With a Callback (Lazy Initial State)
177. useState Summary
178. How NOT to Select DOM Elements in React
179. Introducing Another Hook: useRef
180. Refs to Select DOM Elements
181. Refs to Persist Data Between Renders
182. What are Custom Hooks? When to Create One?
183. Creating our First Custom Hook: useMovies
184. Creating useLocalStorageState
185. Creating useKey
186. CHALLENGE #1: useGeolocate
187. [Optional] React Before Hooks: Class-Based React
188. Section Overview
189. Our First Class Component
190. Working With Event Handlers
191. Class Components vs. Function Components
192. Starting the "Classy Weather" App
193. Fetching Weather Data
194. Displaying the Weather
195. Removing Boilerplate Code With Class Fields
196. Child to Parent Communication
197. Lifecycle Methods
198. PART 3: ADVANCED REACT + REDUX [4 PROJECTS]
199. Introduction to Part 3
200. Useful Resources for Part 3

Congratulations! You’re on the brink of entering the fast-evolving world of NextJS, designed to empower developers with the tools to create high-performance, feature-rich web applications that stand out in the modern digital landscape.

NextJS is the key to unlocking the full potential of server-rendered React applications, combining the best of web development into one powerful, developer-friendly framework. This comprehensive course takes you on a deep dive into advanced NextJS features that can set you apart in the job market, equipping you to tackle real-world projects with confidence. By exploring the intricacies of authentication with the Next-Auth library, the innovative approach to data mutations using server actions, and the foundational concepts of server and client components, you'll be well on your way to mastering modern web development.

With the tech industry looking for skilled professionals, mastering Next puts you at the forefront of opportunity, with a skill set that's in high demand. Whether you're eyeing a new career as a software engineer or aiming to enhance your existing projects, there's never been a better time to delve into Next.

What will you achieve?

Through an extensive collection of video lectures complemented by detailed diagrams and real-world examples, this course ensures a thorough understanding of Next's capabilities, no pre-existing knowledge of the framework necessary. I've crafted a learning experience that's both rigorous and encouraging, with layers of knowledge built one at a time and ample dialogue to contextualize each feature of Next.

I proudly offer the most detailed journey through Next available online. No stone is left unturned in this resource-packed adventure.

Prepare to conquer a diverse array of topics, including:

• Implementing user authentication flows with next-auth, for secure and scalable user management

• Effectively structuring server actions to handle data mutations

• Dissecting the theory of server vs client components, and knowing how to leverage each for maximum efficiency

• Mastering data validation techniques to ensure the reliability and integrity of user input

• Navigating Next's sophisticated caching systems to deliver lightning-fast content performance

• Recognizing the critical differences between development and production environments and preparing your applications for successful deployment

• Tailoring Server-Side Rendering (SSR) and Static Site Generation (SSG) to your application's needs

• Utilizing Incremental Static Regeneration (ISR) for the best of SSR and SSG

• Enriching user interfaces with TailwindCSS support for styling components

• Optimizing images on-the-fly with Next's Image component for better performance and user experience

• Deploying your Next applications with Vercel and other hosting platforms with ease

• Leveraging TypeScript with Next for robust, type-safe applications

With each new topic, you’ll gain knowledge, proficiency, and the assurance to apply what you’ve learned to practical scenarios.

Embrace the opportunity to define the future of web development with your newly acquired NextJS expertise. Join the ranks of developers who not only follow best practices but also contribute to them. Sign up now and transform your understanding and execution of modern web development with Next.

1. Get Started Here!
2. How to Learn NextJS Quickly
3. Project Overview
4. File-Based Routing
5. Adding Additional Routes
6. Linking Between Pages
7. Common UI in Next JS with Layouts
8. Project Structure Strategy
9. Absolute Path Import Shortcut
10. Image Files + Import Update
11. Adding Images in Next JS
12. More on the Image Component
13. Adding a Reusable Presentation Component
14. Adding Some Styling
15. Production Deployment with Vercel
16. Join Our Community!
17. Course Diagrams
18. Changing Data with Mutations
19. App Overview
20. Project Setup
21. Adding a Create Page
22. Creating a Prisma Client within Next.js
23. Adding a Creation Form
24. Streaming Content with React Server Components
25. Introducing Server Actions in Next.js
26. A Deeper Dive into Server Actions
27. Server Components vs Client Components
28. Fetching Data with Server Components
29. Adding Dynamic Paths
30. Async Dynamic Params in Next.js 15
31. Fetching Particular Records
32. Custom Not Found Pages
33. Automatic Loading Spinnners
34. A Few Quick Tasks
35. Styling the Show Page
36. More Async Dynamic Params In Next.js 15
37. Linking to the Edit Page
38. Showing a Client Component in a Server Component
39. Installing the Monaco Editor in Next.js 15
40. Adding the Monaco Editor
41. Handling Editor Changes
42. Server Actions in Great Detail
43. Server Actions in Nextjs Client Components
44. Server Actions in a Separate File
45. Options for Calling Server Actions from Client Components
46. Calling a Server Action from a Client Component
47. Deleting a Record with a Server Action
48. Server Forms with the UseFormState Hook
49. Understanding the UseFormState Hook
50. useActionState in Next v15
51. UseForm State in Action
52. Adding the Form Validation
53. Gotchas Around Error Handling in Nextjs
54. Understanding Next's Caching System
55. Super Unexpected Behavior
56. The Full Route Cache System
57. What Makes a Static or Dynamic Route in Next.js
58. When to Use Each Cache Control
59. Help, My Page is Showing Old Data!
60. Enabling Caching with GenerateStaticParams
61. Caching Dynamic Routes
62. Authentication with Next-Auth
63. Project Overview
64. Critical Libraries in Our Project
65. Legacy Peer Deps Flag for Next.js 15
66. NextUI Installation and Setup
67. Prisma Schema File
68. Database Setup
69. Install versions for Next.js 15
70. OAuth Setup
71. Next-Auth Setup
72. The Theory Behind OAuth
73. Wrapping Auth in Server Actions
74. Sign In, Sign out, and Checking Auth Status
75. Upfront Design Process
76. Why Path Helpers?
77. Path Helper Implementation
78. Creating the Routing Structure
79. Stubbing Out Server Actions
80. Planning Revalidating Strategies
81. Building the Header
82. Displaying the Sign In and Sign Out Buttons
83. Enabling Sign Out
84. More Caching Issues
85. Static Caching While Using Auth
86. Creating Topics
87. Creating a Popover Form
88. Receiving Form Data
89. Adding Form Validation with Zod
90. Reminder on the UseFormState Hook
91. useAction State in Next.js 15
92. Fixing UseFormState Type Errors
93. Here's Our FormState Type
94. Displaying Validation Errors
95. Handling General Form Errors
96. Handling Database Errors in Forms
97. Using Data - Database Queries
98. Showing Loading Spinners with UseFormStatus
99. Fetching and Listing Content from Prisma
100. More Async Dynamic Params in Next.js 15
101. Scaffolding the Topic Show Page
102. More useActionState in Next.js 15
103. Displaying a Creation Form
104. Applying Validation to Post Creation
105. Checking Authentication Status
106. Passing Additional Args to a Server Action
107. Creating the Record
108. A Few Project Files
109. Merging a Few Files
110. Considerations Around Where to Fetch Data
111. Data Fetching in Child Components
112. Recommended Data Fetching
113. Define in Parent, Fetch in Child
114. Alternative Type Names and Query Definitions
115. Don't Go Crazy With Reuse
116. Comment Creation
117. Recursively Rendering Components
118. Fetching the Big List
119. Caching with Request Memoization
120. Multiple Repeated DB Queries
121. Introducing Duplicate Queries
122. Request Memoization
123. Deduplicating Requests with Cache
124. Implementing Search Functionality
125. Adding in Component Streaming
126. Streaming with Suspense
127. Adding a Loading Skeleton
128. Top Posts on the HomePage
129. Back to the Search Input
130. Notes on QueryStrings in Next
131. Accessing the Query String
132. Redirecting From a Server Action
133. Even More Async Dynamic Params in Next.js 15
134. Receiving the Query String in a Server Component
135. Running the Search
136. The De-Opt to Client Side Rendering Warning
137. Wrap Up!
138. Deploying Discuss App to Vercel with Postgres
139. Supplement - React Primer
140. A Note About the Following Lectures
141. Let's Build an App!
142. Critical Questions
143. A Few More Critical Questions
144. Node Setup
145. Creating a React Project
146. What is Create React App
147. Showing Basic Content
148. What is JSX?
149. Printing JavaScript Variables in JSX
150. Shorthand JSX Expressions
151. Typical Component Layouts
152. Customizing Elements with Props
153. Converting HTML to JSX
154. Applying Styling in JSX
155. Extracting Components
156. Module Systems Overview
157. Cheatsheet for JSX
158. Project Overview
159. Creating Core Components
160. Introducing the Props Systems
161. Picturing the Movement of Data
162. Adding Props
163. Using Argument Destructuring
164. React Developer Tools
165. Most Common Props Mistake
166. Images for the App
167. Including Images
168. Handling Image Accessibility
169. Review on How CSS Works
170. Adding CSS Libraries with NPM
171. A Big Pile of HTML!
172. Last Bit of Styling
173. Supplement - TypeScript Primer
174. A Note About the Following Lectures
175. TypeScript Overview
176. Environment Setup
177. Important Axios and TypeScript Version Information
178. A First App
179. Executing TypeScript Code
180. One Quick Change
181. Catching Errors with TypeScript
182. Catching More Errors!
183. Types
184. More on Types
185. Examples of Types
186. Where Do We Use Types
187. Type Annotations and Inference
188. Annotations with Variables
189. Object Literal Annotations
190. Annotations Around Functions
191. Understanding Inference
192. The "Any" Type
193. Fixing the "Any" Type
194. Delayed Initialization
195. When Inference Doesn't Work
196. More on Annotations Around Functions
197. Inference Around Functions
198. Annotations for Anonymous Functions
199. Void and Never
200. Destructuring with Annotations

This is a project based course that will teach you how to use Next.js in the real world. We use all of the latest features in Next 14 to build a property rental website where users can browse, search and manage property listings.

Next.js is the future of React. Server-side rendered websites and static websites are becoming the norm over single page applications and Next.js allows you to build both with ease. Learning Next will give you a huge advantage when it comes to modern web development.

The project will have the following features:

• User authentication with Google & Next Auth

• User authorization

• Server Actions & Database Interaction

• Route protection

• User profile with user listings

• Property Listing CRUD

• Property image upload (Multiple)

• Cloudinary integration

• Property search

• Internal messages with 'unread' notifications

• Photoswipe image gallery

• Mapbox maps

• Toast notifications

• Property bookmarking / saved properties

• Property sharing to social media

• Loading spinners

• Responsive design (Tailwind)

• Custom 404 page

This course will give you all of the skills that you need to start creating your own full stack Next.js applications.

Here are some of the packages and technologies that we will be using:

• Next.js 14

• React

• Tailwind CSS

• MongoDB

• Mongoose

• Next Auth

• React Icons

• Photoswipe

• Cloudinary

• Mapbox

• React Map GL

• React Geocode

• React Spinners

• React Toastify

• React Share

1. Introduction
2. Welcome To The Course
3. PropertyPulse Project Demo
4. What Is Next.js?
5. Next.js Features
6. Environment Setup
7. Project Theme Files
8. Next.js Fundamentals & Project Start
9. New Project & Tailwind Config
10. Layout & Homepage
11. Metadata & Assets
12. File-Based Routing
13. Server vs Client Components
14. Client Component & Navigation Hooks
15. Navbar Component Start
16. Navbar Links, Dropdown State, Icons
17. Active Links & Conditional Rendering
18. Homepage Components & Footer
19. Properties Page & PropertyCard Component
20. Home Property Listings
21. Custom Not Found & Loading Pages
22. MongoDB Database, Server Components & Fetching Properties
23. Create MongoDB Database
24. MongoDB Compass & Importing Data
25. Database Connection & Mongoose
26. Property & User Models
27. Fetch Data Using Server Component
28. Single Property & Header Image
29. Property Details Component
30. Intro To API Routes
31. Next Auth, Sessions & Google Provider
32. What Is Next Auth?
33. Google OAuth Setup
34. Next Auth & Provider Setup
35. Sign In Button
36. Save User to Database & Session
37. Profile Image
38. Sign Out Button
39. Protecting Routes
40. Server Actions & Creating Properties
41. Add Property Form
42. Server Actions
43. Format Property Data
44. Get User From Session
45. Remove Try/Catch From getSessionUser
46. Submit Property To Database
47. Custom Error Page
48. Cloudinary Image Upload
49. PropertyCard & Header Images
50. PropertyImages Component
51. Profile & Manage Properties
52. User Profile Info Display
53. User Profile Listings
54. Searialize Lean Documents
55. Deleting Properties
56. Toast Notifications
57. Edit Property Form
58. Update Property Action
59. Map, Bookmarks & Sharing
60. Geocode For Latitude & Longitude
61. Mapbox Map Display
62. Property Page Sidebar
63. Bookmark Property Action
64. Bookmark Button Functionality
65. Check Bookmark Status
66. Saved Properties Page
67. Share Buttons
68. Property Search
69. Property Search Component
70. Fetch Search Results
71. Display Search Results
72. Messaging System
73. Message Model & addMessage Action
74. Submit Message & useFormState Hook
75. useFormStatus Hook
76. Fetch Messages
77. Display Messages
78. Mark As Read
79. Delete Messages
80. Global Context For Message Count
81. Get Unread Message Count
82. Pagination, Featured, Lightbox & Deploy
83. Pagination Logic
84. Pagination Component
85. Photoswipe Lightbox
86. Featured Properties
87. Deploy To Vercel

Update October 2024:

Updated content to reflect latest version of Next.js (15).

Update March/April 2024:

Completely updated the entire course to cover the latest version of Next.js!

This course teaches you the latest version of Next.js and covers both the "App Router" and "Pages Router" (and explains what these two approaches are).

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

1. Getting Started
2. Welcome To The Course!
3. What Is NextJS? Why Would You Use It?
4. Key Features & Benefits Of NextJS
5. Creating a First NextJS App
6. NextJS vs "Just React" - Analyzing The NextJS Project
7. Editing The First App
8. Pages Router vs App Router - One Framework, Two Approaches
9. How To Get The Most Out Of This Course
10. Learning Community & Course Resources
11. Course Setup
12. Optional: React Refresher
13. Using the Code Snasphots
14. Module Introduction
15. What Is React & Why Would You Use It?
16. React Projects - Requirements
17. Creating React Projects
18. Our Starting Project
19. Understanding How React Works
20. Building A First Custom Component
21. Outputting Dynamic Values
22. Reusing Components
23. Passing Data to Components with Props
24. CSS Styling & CSS Modules
25. Exercise & Another Component
26. Preparing the App For State Management
27. Adding Event Listeners
28. Working with State
29. Lifting State Up
30. The Special "children" Prop
31. State & Conditional Content
32. Adding a Shared Header & More State Management
33. Adding Form Buttons
34. Handling Form Submission
35. Updating State Based On Previous State
36. Outputting List Data
37. Adding a Backend to the React SPA
38. Sending a POST HTTP Request
39. Handling Side Effects with useEffect()
40. Handle Loading State
41. Understanding & Adding Routing
42. Adding Routes
43. Working with Layout Routes
44. Refactoring Route Components & More Nesting
45. Linking & Navigating
46. Data Fetching via loader()s
47. Submitting Data with action()s
48. Dynamic Routes
49. Module Summary
50. IMPORTANT -- LEGACY CONTENT BELOW
51. Module Introduction
52. What is ReactJS?
53. Why ReactJS & A First Demo
54. Building Single-Page Applications (SPAs)
55. React Alternatives
56. Creating a New React Project
57. Setting Up A Code Editor
58. React 18
59. Diving Into The Created Project
60. How React Works & Understanding Components
61. More Component Work & Styling With CSS Classes
62. Building & Re-using Components
63. Passing Data With Props & Dynamic Content
64. Handling Events
65. Adding More Components
66. Introducing State
67. Working with "Event Props"
68. Use The Right React Router Version
69. Adding Routing
70. Adding Links & Navigation
71. Scoping Component Styles With CSS Modules
72. Outputting Lists Of Data & Components
73. Adding Even More Components
74. Creating "Wrapper" Components
75. Working With Forms
76. Getting User Input & Handling Form Submission
77. Preparing The App For Http Requests & Adding a Backend
78. Sending a POST Http Request
79. Navigating Programmatically
80. Getting Started with Fetching Data
81. Using the "useEffect" Hook
82. Introducing React Context
83. Updating State Based On Previous State
84. Using Context In Components
85. More Context Usage
86. Module Summary
87. Module Resources
88. NextJS Essentials (App Router)
89. Module Introduction
90. Starting Setup
91. Understanding File-based Routing & React Server Components
92. Adding Another Route via the File System
93. Navigating Between Pages - Wrong & Right Solution
94. Working with Pages & Layouts
95. Reserved File Names, Custom Components & How To Organize A NextJS Project
96. Reserved Filenames
97. Configuring Dynamic Routes & Using Route Parameters
98. Onwards to the Main Project: The Foodies App
99. Exercise: Your Task
100. Exercise: Solution
101. Revisiting The Concept Of Layouts
102. Adding a Custom Component To A Layout
103. Styling NextJS Project: Your Options & Using CSS Modules
104. Optimizing Images with the NextJS Image Component
105. Using More Custom Components
106. Populating The Starting Page Content
107. Preparing an Image Slideshow
108. React Server Components vs Client Components - When To Use What
109. Using Client Components Efficiently
110. Outputting Meals Data & Images With Unknown Dimensions
111. Setting Up A SQLite Database
112. Fetching Data By Leveraging NextJS & Fullstack Capabilities
113. Adding A Loading Page
114. Using Suspense & Streamed Responses For Granular Loading State Management
115. Handling Errors
116. Handling "Not Found" States
117. Loading & Rendering Meal Details via Dynamic Routes & Route Parameters
118. Throwing Not Found Errors For Individual Meals
119. Getting Started with the "Share Meal" Form
120. Getting Started with a Custom Image Picker Input Component
121. Adding an Image Preview to the Picker
122. Improving the Image Picker Component
123. Introducing & Using Server Actions for Handling Form Submissions
124. Storing Server Actions in Separate Files
125. Creating a Slug & Sanitizing User Input for XSS Protection
126. Storing Uploaded Images & Storing Data in the Database
127. Managing the Form Submission Status with useFormStatus
128. Adding Server-Side Input Validation
129. Using useFormState()
130. Working with Server Action Responses & useFormState
131. Building For Production & Understanding NextJS Caching
132. Triggering Cache Revalidations
133. Don't Store Files Locally On The Filesystem!
134. Bonus: Storing Uploaded Images In The Cloud (AWS S3)
135. Adding Static Metadata
136. Adding Dynamic Metadata
137. Module Summary
138. Routing & Page Rendering - Deep Dive
139. Module Introduction
140. Project Setup, Overview & An Exercise!
141. Exercise Solution - Part 1
142. Exercise Solution - Part 2
143. App Styling & Using Dummy Data
144. Handling "Not Found" Errors & Showing "Not Found" Pages
145. Setting Up & Using Parallel Routes
146. Working with Parallel Routes & Nested Routes
147. Configuring Catch-All Routes
148. Catch-All Fallback Routes & Dealing With Multiple Path Segments
149. Throwing (Route-related) Errors
150. Handling Errors With Error Pages
151. Server vs Client Components
152. Nested Routes Inside Dynamic Routes
153. Intercepting Navigation & Using Interception Routes
154. Combining Parallel & Intercepting Routes
155. Replace page.js with default.js
156. Navigating Programmatically
157. Defining the Base HTML Document
158. Using & Understanding Route Groups
159. Building APIs with Route Handlers
160. Using Middleware
161. Module Summary
162. Data Fetching - Deep Dive
163. Module Introduction
164. Adding a Backend
165. Option 1: Client-side Data Fetching
166. Option 2: Server-side Data Fetching
167. Why Use A Separate Backend? Fetching Directly From The Source!
168. Showing a "Loading" Fallback
169. Migrating An Entire Application To A Local Data Source (Database)
170. Granular Data Fetching With Suspense
171. Mutating Data - Deep Dive
172. Module Introduction
173. Starting Project & Analyzing Mutation Options
174. Setting Up A Form Action
175. Creating a Server Action
176. Storing Data in Databases
177. Providing User Feedback with The useFormStatus Hook
178. Using useFormState Hook
179. Validating User Input With Help Of The useFormState Hook
180. Adjusting Server Actions for useFormState
181. Storing Server Actions In Separate Files
182. "use server" Does Not Guarantee Server-side Execution!
183. Uploading & Storing Images
184. Alternative Ways of Using, Configuring & Triggering Server Actions
185. Revalidating Data To Avoid Caching Problems
186. Performing Optimistic Updates With NextJS
187. Caching Differences: Development vs Production
188. Understanding & Configuring Caching
189. Module Introduction
190. Making Sense of NextJS' Caching Types
191. Project Setup
192. Handling Request Memoization
193. Understanding The Data Cache & Cache Settings
194. Controlling Data Caching
195. Making Sense Of The Full Route Cache
196. On-Demand Cache Invalidation with revalidatePath & revalidateTag
197. Setting Up Request Memoization For Custom Data Sources
198. Setting Up Data Caching For Custom Data Sources
199. Invalidating Custom Data Source Data
200. Module Summary

Start your path to becoming a proficient web developer with our detailed video course on building apps using Next JS 14. Designed specifically for beginners and intermediate developers, this course will help you develop high-level skills. Begin by creating a Next.js application from scratch, understanding its structure, and mastering advanced routing techniques, including link components and dynamic paths.

Delve into front-end design using TailwindCSS and Shadcn/ui, mastering responsive design, theme management, and consistent styling with layout components. Learn the fundamentals of backend development, including the distinctions between server and client components, how to fetch data, manage loading states, and implement error handling along with nested layouts.

Enhance your app with CRUD functionalities through Server Actions, improve user interaction, and ensure data integrity with the Zod library. You will also integrate a database using Supabase, handle image uploads, and implement crucial functionalities like authentication with CLERK Service.

Conclude the course with the skills to deploy your NextJS app on Vercel, and incorporate features such as prompt handling, response management, and image generation.

This course offers a practical approach, including numerous challenges to apply what you've learned. Transform your web development skills and gain the confidence to create sophisticated web applications.

1. Introduction
2. Useful Info
3. Github Repo
4. Discord Channel
5. Next.js Tutorial
6. Important Info !!!
7. Install
8. Files and Folders
9. Home Page
10. Create Pages
11. Link Component
12. Nested Routes
13. CSS
14. Tailwind Info (optional)
15. Layout Component
16. Navbar Component
17. Fonts
18. Metadata
19. Server vs Client
20. Counter
21. Fetch Data
22. Refactor
23. Loading Component
24. Error Component
25. Nested Layout
26. Dynamic Page
27. Local Image
28. Remote Images
29. Responsive Images
30. More Routing Options
31. Server Actions - Info
32. Actions Page - Setup
33. Actions File
34. Save User
35. Fetch Users
36. Revalidate Cache and Redirect
37. UseFormStatus Hook
38. UseFormState Hook
39. Delete Button
40. Input Hidden
41. Bind Method
42. Route Handlers - Info
43. Route Handler - GET
44. Route Handlers - Params
45. Route Handlers - POST
46. Middleware
47. Local Build
48. Cache
49. HomeAway Project
50. Project Overview
51. Install New Next.js Application
52. Remove Boilerplate
53. Create Pages
54. Important Update !!!
55. Install Shadcn/ui Library
56. Shadcn/ui Button Component
57. Install More Shadcn/ui Components
58. Navbar Structure
59. Logo and NavSearch Components
60. Change Theme with Shadcn/ui
61. Setup Dark Mode with Shadcn/ui
62. LinksDropdown Component
63. Important Info !!!
64. Setup and Customize Clerk Auth Provider
65. SignOutLink Component
66. LinksDropdown Component
67. Create Profile - Setup
68. FormInput Component
69. SubmitButton Component
70. FormContainer Component
71. Refactor Create Profile
72. Zod Library
73. Important Info !!!
74. Supabase Setup
75. Prisma Setup
76. Connect Prisma and Supabase
77. Prisma Crud Examples
78. Create Profile Model and createProfileAction
79. Fetch Profile Image Action
80. Modify Create Profile Page
81. Fetch User Profile
82. Update Profile Page
83. Zod SafeParse Method
84. ValidateWithZodSchema - Helper Function
85. Image Input
86. Image Input Container
87. Image Zod Validation
88. Supabase Bucket and Keys
89. Supabase Upload Image
90. Update Profile Image Action - Complete
91. Property Schema
92. Create Property Page - Setup
93. Price Input
94. Categories Input
95. Description Input
96. Countries Input
97. Counter Input
98. Amenities Input
99. Create Property
100. Fetch Properties
101. Home Page - Setup
102. Categories List
103. Empty List
104. Properties Container
105. PropertyCard - Setup
106. PropertyCard - Structure
107. Property Rating
108. Favorites Toggle Button
109. Country Name and Flag
110. Loading Cards
111. NavSearch Component
112. Favorites SignIn Button
113. Fetch Favorite
114. Favorites Toggle Form
115. Toggle Favorites - Functionality
116. Favorites Page
117. Property Details Page - Setup
118. Breadcrumbs Component
119. Share Button Component
120. Image Container Component
121. Calendar Component
122. Property Details Component
123. UserInfo Component
124. Description Component
125. Amenities Component
126. Property Map Component
127. Supabase Bug !!!
128. Deploy Application on Vercel
129. Reviews Model
130. RatingInput Component
131. SubmitReviews Component
132. SubmitReview Functionality
133. Fetch Reviews
134. Render Reviews
135. ReviewCard Component
136. Fetch and Delete User Reviews
137. IconButton Component
138. Reviews Page
139. Reviews Loading Component
140. PropertyRating Component - Complete
141. Allow Review
142. Booking
143. Booking Model
144. Booking Components
145. Zustand Library
146. Booking Container / Calendar - Initial Setup
147. Calculate Totals
148. Booking Form
149. Confirm Booking Component
150. Create Booking Action
151. Blocked Periods
152. Disabled Dates
153. Fetch Bookings and Delete Booking
154. Bookings Page
155. Delete Booking
156. Loading Table Component
157. Entire App
158. Fetch and Delete Rentals Functions
159. Rentals Page
160. Fetch Rental Details Function
161. Edit Rentals Page
162. Amenities Input Gotcha
163. Update Rental Functions
164. Reservation Page - Setup
165. Fetch Reservations
166. Reservations Page - Complete
167. Admin Page - Setup
168. Admin Page - Middleware
169. Admin Page - Loading Components
170. Admin Page - Stats Container
171. Admin Page - Fetch Chart Data
172. Admin Page - Chart Container
173. Stripe - Setup
174. Stripe - Checkout Page
175. Stripe - Payment Route
176. Stripe - Confirm Route
177. Stripe - Refactor Queries
178. Reservations Stats
179. Deploy Bug Fix !!!
180. Atlas Setup - Optional Video !!!
181. Bonus
182. Bonus