Next.js From Scratch (Udemy.com)
Build a real-world project using Next.js and MongoDB
Created by: Brad Traversy
Last updated January 2025
What you will learn
- Learn The Fundamentals of Next JS
- Build a Real-World Property Rental Website From Scratch
- File-Based Routing, React Server Components, Data Fetching, API Routes+
- Next Auth & Google Provider for Authentication & Authorization
- Use MongoDB & Mongoose In Server Actions
- Internal Messaging, Bookmarks, Search, Image Lightboxes, Pagination+
- Implement Cloudinary for Image Storage & Optimization
Course Description
This is a project based course that will teach you how to use Next.js in the real world. We use the Next.js framework 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
Instructor Details
- 4.4 Rating
1,955 Reviews
Brad Traversy
Brad Traversy has been programming for around 12 years and teaching for almost 5 years. He is the owner of Traversy Media which is a successful web development YouTube channel and specializes in everything from HTML5 to front end frameworks like Angular as well as server side technologies like Node.js, PHP and Python. Brad has mastered explaining very complex topics in a simple manner that is very understandable. Invest in your knowledge by watching Brad's courses.
More courses by Brad Traversy
Modern JavaScript From The Beginning 2.0 (Just Updated) (2025)
4.6 (36,520 Reviews)
Provider: Udemy
Time: 40.2h
$16.99
Modern HTML & CSS From The Beginning 2.0 (2025)
4.8 (28,669 Reviews)
Provider: Udemy
Time: 24.3h
$129.99
Bootstrap 4 From Scratch With 5 Projects (2018)
4.6 (17,122 Reviews)
Provider: Udemy
Time: 11.3h
$84.99
MERN Stack Front To Back: Full Stack React, Redux & Node.js (2019)
4.4 (15,750 Reviews)
Provider: Udemy
Time: 11.9h
$99.99
50 Projects In 50 Days - HTML, CSS & JavaScript (2025)
4.6 (12,876 Reviews)
Provider: Udemy
Time: 19.4h
$119.99
More Web Development courses
Python Fullstack Mastery: Build Modern Web Apps with Django (2025)
5.0 (165 Reviews)
Provider: Udemy
Time: 35h
$19.99
NgRx Signal store for Angular - The missing guide (2026)
4.9 (436 Reviews)
Provider: Udemy
Time: 11.3h
$89.99
Vue 3: Create a Mobile & Desktop App (with Quasar 2 & Pinia) (2024)
4.9 (177 Reviews)
Provider: Udemy
Time: 7.6h
$79.99
Build a URL Shortener App with ASP.NET: Step by Step (2026)
4.9 (100 Reviews)
Provider: Udemy
Time: 9.6h
$10.99
The Complete Elixir and Phoenix Bootcamp (2021)
4.8 (7,773 Reviews)
Provider: Udemy
Time: 17.4h
$84.99
Reviews
By Mvang Makouangou Lerich David on 2/26/2026
Merci infiniment Brad, j'ai eu une tres bonne intro sur Next.js, MongoDB, Google Provider, etc. je me lance directement sur ton deuxieme cours (Next.js Ecommerce 2025 - Shopping Platform From Scratch) afin d'approfondir d'avantage mes connaissances. Le cours est ancien mais il est a jour. J'ai rencontre des petits bug mais facile a corriger par exemple, l'utilisation de searchParams doit obligation etre async alors dans l'ancienne version du cours elle passait simplement au props. const PropertiesPage = async ({searchParams}) => { const params = await searchParams; const page = parseInt(params?.page) || 1; const pageSize = 6; const skip = (page -1 ) * pageSize;
By Caroline Hussey on 12/11/2025
Another great course from Brad & team! Brad walks through building a web app - a property search site - from the ground up. It's a good overview on how to build a web app in NextJs with tools such as MongoDB, NextAuth (with Google OAuth), Mapbox with Google geocoding, Cloudinary and Photoswipe. Plenty of opportunities to build on your skills and solve real world developer problems by expanding / updating the project. The Q & A is especially useful to help troubleshoot and reach out to course providers and other learners (Thank you so much for the helpful responses!). Looking forward to the next one!
By Le Xuan Binh on 10/15/2025
I really enjoy your course — it has helped me a lot in learning Next.js. The lessons are very practical, and the way you explain each concept with simple, essential features makes it easy for learners to understand. I truly hope you’ll release more courses like this, especially ones that combine Next.js and MongoDB, with real-world projects that include more advanced and challenging features. I’d love to deepen my understanding of Next.js through hands-on projects like the ones you teach. Thank you so much for your great work!
By LEE Ken WT on 7/3/2025
A wonderful kick-starter for beginners. I built a fully-functioning web site line-by-line, literally from scratch by following the instructor. The Q&A section is very engaging. I appreciate Brad included VS Code shortcuts and plugins so beginners can code like a pro! Not every piece of code is explained. But it is how to keep adding functions every session in a matter of around 10 minutes. I typed in and it just worked. I could always dig deeper in other sources. By finishing the course, I feel already on the giant's shoulder in my hobby projects.
By Edwin S on 1/3/2025
Another great course from one of my favorite instructors in general. I've completed the 2nd iteration with the server actions updates. As usual Brad is on point and thorough in explanation. It's a very fun project to build and the knowledge you gain is very applicable to all sorts of real world (production) apps. For me personally it was a great way to get into Next with prior React knowledge and experience. If I have to name anything, it's unfortunate that TypeScript isn't used here, as it is very much in demand. And I think they might have missed a few details while updating the course/making new video's. For example the deployment video still refers to a request.js file (?) It's neither in the course or in the repo. But yeah... just minor details. Overall a excellent buy!
By Raúl Requena on 6/24/2024
Let me start by saying that Brad is amazing. The amount of knowledge I've gained from his courses is incredible. On this specific course, I felt my React knowledge improved significantly, and I also learned about NextJS. However, since the main focus was on building the site, the emphasis on NextJS sometimes got lost. I believe the course would benefit greatly from having a dedicated section at the beginning that covers the NextJS topics used during the development, rather than learning about them on the fly. I plan to revisit the course once the updates to use server actions are implemented. Overall, it's a great course for someone with a basic understanding of NextJS who wants to cement their knowledge and practice. IMO.
By Rafael Massimo de Almeida on 6/13/2024
I spent many hours trying to finish this course, and now you in the last video you guys are saying that we need to change a lot of code and structure because suddenly the app cannot be deployed?! This is not correct for the students, as it is super frustrating and a waste of time. Now, if I try to replicate what I learned, I don't know if it will work or not! You are not serious instructors, selling a course with errors. You both are incompetent professionals, trying to make money with bad service. I'll report you guys, I'll try my best to make you guys remove this course from udemy to avoid other users to have the same issue. That's ridiculous!
By Dave Taylor on 6/5/2024
This is an excellent course from Brad Traversy and Traversy Media. Not only will you learn a lot about NextJS which is a good step forwards from just using pure React, but you will implement a feature-rich project, learn about all sorts of decent integrations to achieve that (MongoDB, Google Geocoding, Mapbox, Lightbox etc) and then be able to deploy your application live on the web. It's a really nice way to pick up skills and at the same time feel some immediate achievement by building something while you learn. Thanks again Brad for another wonderful course!
By Deepika Lachmayya Naik on 5/29/2024
I appreciated several aspects of this course. Firstly, the pre-written and clearly commented markup code provided beforehand was very helpful, as it saved us time and ensured clarity. Secondly, the way you typed all the functions and technical codes without missing any steps was excellent. Even when there were errors, you edited the video to show the corrections, which was very informative. Additionally, the explanations throughout the course were precise and on point.
By Syed Zeeshan Haider on 5/15/2024
Next.js from Scratch is an exceptional course that offers a comprehensive dive into the intricacies of Next.js, empowering learners to build modern web applications with ease. Structured impeccably, this course is a gem for both beginners and seasoned developers looking to enhance their skills in Next.js development. The course covers a wide array of topics, ranging from the basics of Next.js to more advanced concepts such as server-side rendering, routing, and API integration. The progression of topics is logical and well-paced, ensuring that learners grasp foundational concepts before delving into more complex material. The instructors demonstrate a thorough understanding of Next.js, and their explanations are clear, concise, and engaging. They anticipate common pitfalls and provide helpful tips and tricks along the way, enhancing the learning experience. Highly recommended!
Quality Score
No CourseDuck member has rated this course yet. Taken it? Give each part a thumbs up or down.
Overall Score : 88 / 100












