CF

Next.js From Scratch 2024

11h 54m 9s
English
Free

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.

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

About the Author: Brad Traversy

Brad Traversy thumbnail

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.

Watch Online 76 lessons

  • 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 TitleDuration
1Welcome To The Course 02:38
2Premium Docs Download 01:15
3PropertyPulse Project Demo 08:36
4What Is Next.js? 08:45
5Environment Setup 04:11
6Creating a New Next.js Project 06:14
7Layout, Homepage & Metadata 10:48
8File-Based Routing 07:17
9Server Components, Client Components & Router Hook 09:45
10Start the Navabar Component 10:04
11Navbar Links, Dropdowns & React Icons 12:29
12Active Links & Conditional Rendering 11:49
13Homepage Components 15:46
14Properties Page 07:27
15Property Card Dynamic Data 14:42
16Home Properties Component 07:43
17Custom Not Found & Loading Page 05:59
18Create MongoDB Database 08:45
19Compass & Importing Data 04:37
20Database Connection With Mongoose 06:32
21Your First API Route 06:06
22Property & User Models 12:31
23Fetch Data From Server Components 09:49
24Requests File 04:26
25Fetch Single Property 10:52
26Single Property Page 11:55
27Property Details Component 15:35
28Spinner Component 02:38
29Google OAuth Setup 06:39
30Next Auth & Provider Setup 08:46
31Session Provider Wrapper 05:38
32Sign In Button 09:31
33Save User to Database & Session 05:58
34Profile Image 04:40
35Sign Out & Protect Routes 06:16
36Add Property Form & State 12:44
37Form Input Handlers 13:45
38Add Property POST API Route 13:57
39Get User & Submit To Database 13:47
40Cloudinary Image Upload 15:55
41Property Image Display 15:51
42User Profile Info 04:55
43User Profile Listings 17:04
44Deleting Properties 10:14
45Toast Notifications 03:55
46Edit Property Form 12:14
47Update PUT API Route 12:32
48Geocoding & Mapbox Map 16:41
49Handle Geocode Error 04:05
50Property Page Cleanup 06:12
51Bookmark API Route 10:29
52Bookmark Button Request 08:28
53Bookmark Status & Button Toggle 08:55
54Saved Properties 12:18
55Share Buttons 10:42
56Property Search Component 09:06
57Search API Endpoint 09:56
58Fetch Results From API 07:19
59Display Search Results 10:49
60Message Model & Form State 13:00
61Message Submit & API Route 14:23
62Require Auth For Contact Form 03:54
63Fetch Messages 10:31
64Display Messages 11:16
65Mark As Read 15:20
66Delete Messages 08:39
67Order New First 03:26
68New Message Count Display 11:06
69Global Context For Unread Messages 11:07
70Properties Component Refactor 06:34
71Implement Pagination 08:57
72Pagination Component 09:32
73Photoswipe Lightbox Gallery 06:38
74Fetch Featuted Properties 06:54
75Featured Property Component 13:12
76Deploy To Vercel 11:05

Related courses

Frequently asked questions

What is Next.js From Scratch 2024 about?
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…
Who teaches this course?
It is taught by Brad Traversy. You can find more courses by this instructor on the corresponding source page.
How long is the course?
It contains 76 lessons with a total runtime of 11 hours 54 minutes. Every lesson is available to watch online at your own pace.
Is it free to watch?
Yes — this is a free online course on CourseFlix. You can watch every lesson without a paid subscription.
Where can I watch it online?
The course is available to watch online on CourseFlix at https://courseflix.net/course/next-js-from-scratch-2024. The page hosts every lesson with the integrated video player; no download is required.