The main project in this course is a full-featured property rental website with property search, browsing and management. User authentication using Next Auth along with the Google provider. Internal messaging, property bookmarking, Mapbox integration, geocoding and more.
Next.js From Scratch 2024
11h 54m 9s
English
Free
Next.js From Scratch 2024 is a 76-lesson 11 hours 54 minutes self-paced course by Brad Traversy. The main project in this course is a full-featured property rental website with property search, browsing and management.
Course facts
- Lessons
- 76
- Duration
- 11 hours 54 minutes
- Level
- All levels
- Language
- English
- Updated
- Instructor
- Brad Traversy
- Price
- Free
What you'll learn
- Learn how to create SSR websites with Next.js 14
- Build a property rental website from the ground up
- MongoDB, Mongoose & API routes for backend
- Next Auth & Google provider for authentication
- User profiles with listing management
- Cloudinary Image integration
- Bookmarking, maps, pagination, sharing and more
- Internal messaging system for communication
- Deploy to production using Vercel
Who teaches Next.js From Scratch 2024? Brad Traversy
Brad Traversy is a US developer behind Traversy Media — one of the largest independent web-development YouTube channels, with millions of subscribers and one of the most-viewed introductory tutorial libraries on the platform. He has been publishing daily-or-near-daily web development content continuously for nearly a decade and has anchored a generation of self-taught developers' first exposure to HTML, CSS, JavaScript, and the modern framework landscape.
The course catalog (sold via Udemy and the standalone Traversy platform) covers the full web-development stack: HTML and CSS fundamentals, JavaScript, React (including Next.js), Vue, Node.js, Express, MongoDB, full-stack MERN applications, Tailwind CSS, modern CSS layout, and the surrounding tooling. Brad's teaching style is calm, patient, and deliberately accessible to absolute beginners.
The CourseFlix listing under this source carries over 17 Brad Traversy courses spanning that range. Material is paid and aimed primarily at self-taught developers building real proficiency with web development from a clean start.
What lessons are included in Next.js From Scratch 2024?
- Space or K: play or pause
- J: rewind 10 seconds
- L: forward 10 seconds
- Left Arrow: rewind 5 seconds
- Right Arrow: forward 5 seconds
- Up Arrow: volume up
- Down Arrow: volume down
- M: mute or unmute
- F: toggle fullscreen
- T: toggle theater mode
- I: toggle mini player
- 0 to 9: seek to 0 to 90 percent of the video
- Shift plus N: next video
- Shift plus P: previous video
0:00 0:00
| # | Lesson Title | Duration |
|---|---|---|
| 1 | Welcome To The Course | 02:38 |
| 2 | Premium Docs Download | 01:15 |
| 3 | PropertyPulse Project Demo | 08:36 |
| 4 | What Is Next.js? | 08:45 |
| 5 | Environment Setup | 04:11 |
| 6 | Creating a New Next.js Project | 06:14 |
| 7 | Layout, Homepage & Metadata | 10:48 |
| 8 | File-Based Routing | 07:17 |
| 9 | Server Components, Client Components & Router Hook | 09:45 |
| 10 | Start the Navabar Component | 10:04 |
| 11 | Navbar Links, Dropdowns & React Icons | 12:29 |
| 12 | Active Links & Conditional Rendering | 11:49 |
| 13 | Homepage Components | 15:46 |
| 14 | Properties Page | 07:27 |
| 15 | Property Card Dynamic Data | 14:42 |
| 16 | Home Properties Component | 07:43 |
| 17 | Custom Not Found & Loading Page | 05:59 |
| 18 | Create MongoDB Database | 08:45 |
| 19 | Compass & Importing Data | 04:37 |
| 20 | Database Connection With Mongoose | 06:32 |
| 21 | Your First API Route | 06:06 |
| 22 | Property & User Models | 12:31 |
| 23 | Fetch Data From Server Components | 09:49 |
| 24 | Requests File | 04:26 |
| 25 | Fetch Single Property | 10:52 |
| 26 | Single Property Page | 11:55 |
| 27 | Property Details Component | 15:35 |
| 28 | Spinner Component | 02:38 |
| 29 | Google OAuth Setup | 06:39 |
| 30 | Next Auth & Provider Setup | 08:46 |
| 31 | Session Provider Wrapper | 05:38 |
| 32 | Sign In Button | 09:31 |
| 33 | Save User to Database & Session | 05:58 |
| 34 | Profile Image | 04:40 |
| 35 | Sign Out & Protect Routes | 06:16 |
| 36 | Add Property Form & State | 12:44 |
| 37 | Form Input Handlers | 13:45 |
| 38 | Add Property POST API Route | 13:57 |
| 39 | Get User & Submit To Database | 13:47 |
| 40 | Cloudinary Image Upload | 15:55 |
| 41 | Property Image Display | 15:51 |
| 42 | User Profile Info | 04:55 |
| 43 | User Profile Listings | 17:04 |
| 44 | Deleting Properties | 10:14 |
| 45 | Toast Notifications | 03:55 |
| 46 | Edit Property Form | 12:14 |
| 47 | Update PUT API Route | 12:32 |
| 48 | Geocoding & Mapbox Map | 16:41 |
| 49 | Handle Geocode Error | 04:05 |
| 50 | Property Page Cleanup | 06:12 |
| 51 | Bookmark API Route | 10:29 |
| 52 | Bookmark Button Request | 08:28 |
| 53 | Bookmark Status & Button Toggle | 08:55 |
| 54 | Saved Properties | 12:18 |
| 55 | Share Buttons | 10:42 |
| 56 | Property Search Component | 09:06 |
| 57 | Search API Endpoint | 09:56 |
| 58 | Fetch Results From API | 07:19 |
| 59 | Display Search Results | 10:49 |
| 60 | Message Model & Form State | 13:00 |
| 61 | Message Submit & API Route | 14:23 |
| 62 | Require Auth For Contact Form | 03:54 |
| 63 | Fetch Messages | 10:31 |
| 64 | Display Messages | 11:16 |
| 65 | Mark As Read | 15:20 |
| 66 | Delete Messages | 08:39 |
| 67 | Order New First | 03:26 |
| 68 | New Message Count Display | 11:06 |
| 69 | Global Context For Unread Messages | 11:07 |
| 70 | Properties Component Refactor | 06:34 |
| 71 | Implement Pagination | 08:57 |
| 72 | Pagination Component | 09:32 |
| 73 | Photoswipe Lightbox Gallery | 06:38 |
| 74 | Fetch Featuted Properties | 06:54 |
| 75 | Featured Property Component | 13:12 |
| 76 | Deploy To Vercel | 11:05 |
What courses are similar to Next.js From Scratch 2024?
-
Updated 2y agoUltimate Next.js 13 Course + eBook
By: JavaScript MasteryEnter the new era of React. Here’s a little known fact. 17% of the top 1 million websites use Next.js. And Next 13 usage in those top 1 million is doubling ever51h 35m -
Updated 2y agoSolidity & Ethereum in React (Next JS): The Complete Guide
By: UdemyCreate real Smart Contracts in Solidity and DApps with React & Next JS. Understand how the Ethereum blockchain works.38h 47m -
Updated 1y agoBuild a Youtube Clone
By: Antonio Erdeljac (Code With Antonio)In this course, you build a full YouTube‑style app from scratch. You use Next.js 15 , React 19 , and tRPC to create a clear and fast stack.23h 42m -
FreeUpdated 2y agoNext.js - The Full Course
By: FireshipNext.js - The Full Course provides a in-depth look into the Next.js App Router introduced in version 13.2. It puts React Server Components into practice by buil1h 14m5/5 -
Updated 5mo agoNestJS Server-Sent Events | Build a Real Time Crypto Dashboard
By: Michael GuayStudy how to create a crypto dashboard on NestJS using Server-Sent Events to stream data in real-time without reloading the page. Set up23m -
Updated 6mo agoBuild a Full-Stack Todo App with Turborepo, tRPC, Next.js, NestJS & React Native
By: Michael GuayLearn to build a full stack todo app with TypeScript, Turborepo, tRPC, Next.js, NestJS, and React Native. You build web, backend, and mobile parts with steps.2h 47m -
Updated 2y agoNext.js Projects: Build an Issue Tracker
By: Mosh Hamedani (Code with Mosh)Learn to Build Full-stack Apps with Next.js, TypeScript, Prisma, Tailwind, and Radix UI. Clear. Concise. Comprehensive. Tired of piecing together disconnected t7h 1m
More courses by Brad Traversy
-
Updated 2y agoPHP From Scratch 2024 | Beginner To Advanced
Learn PHP fundamentals then build a job listing website from the ground up, using a Laravel-like infrastructure. This course is broken up into two parts. First18h 17m5/5 -
Updated 2y agoReact Front To Back 2022
This course is for anyone that wants to learn React and also for React developers looking to build some projects and sharpen their skills.19h 57m -
ClassicMERN Stack From Scratch
We spend 12 hours creating this project from scratch. It includes a multi-step checkout process with PayPal integration, product search, rating & review, user p13h 32m5/5 -
Updated 3y agoDjango with React | An Ecommerce Website
Build an eCommerce platform from the ground up with React, Redux, Django & Postgres.18h 6m5/5 -
Updated 3y ago20 Web Projects With Vanilla JavaScript
This is a fun, practical & project based course for all skill levels. The projects in this course are designed to get you building things using HTML5, CSS & Jav16h 8m -
ClassicModern JavaScript From The Beginning 2.0
This is a 37+ hour in-depth course that will take you from the absolute beginning of JavaScript, learning about data types, functions and loops to learning DOM36h 42m5/5
Frequently asked questions
What prerequisites are needed for this course?
Before starting this course, it is recommended to have a basic understanding of JavaScript and React, as the course builds on these technologies to teach Next.js. Familiarity with web development concepts such as APIs and database operations will also be helpful, although not strictly necessary, as the course covers setting up a MongoDB database and creating API routes.
What will I build in this course?
This course focuses on building a full-featured property rental website, PropertyPulse. The project includes functionality for property search, browsing, and management. Key features developed include user authentication via Next Auth, Google provider integration, internal messaging, property bookmarking, and geocoding using Mapbox.
Who is the target audience for this course?
The course is designed for web developers who want to deepen their understanding of Next.js and its capabilities. It is particularly suited for those interested in building complex web applications with features such as authentication, data fetching, and interactive UI components.
How does this course's scope compare to other Next.js courses?
This course provides a comprehensive look at Next.js by guiding students through the development of a property rental website. It covers unique features such as server and client components, file-based routing, and authentication with Next Auth. The inclusion of integrations like Mapbox and Cloudinary adds depth not always present in other courses.
What specific tools and platforms are used in the course?
The course utilizes Next.js as the primary framework, with additional tools such as MongoDB for the database, Mongoose for database operations, and Cloudinary for image uploads. Authentication is handled through Next Auth with Google provider support, and geocoding features are implemented via Mapbox.
What topics are not covered in this course?
While the course covers a wide range of topics in Next.js development, it does not delve into advanced server-side rendering techniques beyond the basics, nor does it cover deployment strategies or performance optimization in great detail.
What is the expected time commitment for completing this course?
The course comprises 76 lessons, and while the total runtime is not specified, students should expect to invest a significant amount of time to fully engage with the material. This includes watching lessons, completing coding exercises, and building the final project.