CF

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

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

Who teaches Next.js From Scratch 2024? 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.

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 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

What courses are similar to Next.js From Scratch 2024?

More courses by Brad Traversy

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.