Next.js From Scratch 2024

Focused View

Brad Traversy

11:51:36

350 View

1. Introduction

1. Welcome To The Course.mp4

02:37

2. PropertyPulse Project Demo.mp4

08:35

3. What Is Next.js.mp4

08:44

4. Environment Setup.mp4

04:10

2. Next.js Fundamentals & Project Start

1.1 theme files.zip

1. New Project & Folder Structure.mp4

06:13

2. Layout, Homepage & Metadata.mp4

10:47

3. File-Based Routing.mp4

07:16

4. Server vs Client Components & Router Hooks.mp4

09:44

5.1 Navbar.jsx.zip

5. Start On The Navbar.mp4

10:03

6.1 Navbar.jsx.zip

6. Navbar Links, Dropdowns & React Icons.mp4

12:28

7.1 Navbar.jsx.zip

7. Active Links & Conditional Rendering.mp4

11:47

8. Homepage Components.mp4

15:45

9.1 properties.json.zip

9. Properties Page.mp4

07:26

10. Property Card Dynamic Data.mp4

14:41

11. Home Property Listings.mp4

07:42

12. Custom Not Found & Loading Pages.mp4

05:58

3. Database, API Routes & Property Components

1. Create MongoDB Database.mp4

08:44

2.1 properties Import.json.zip

2. MongoDB Compass & Importing Data.mp4

04:36

3. Database Connection & Mongoose.mp4

06:31

4. Your First API Route.mp4

06:05

5. Property & User Models.mp4

12:30

6. Fetch Data Using Server Component.mp4

09:48

7. Requests File.mp4

04:25

8. Fetch Single Property.mp4

10:51

9. Single Property Page.mp4

11:54

10. Property Details Component.mp4

15:34

11. Spinner Component.mp4

02:37

4. Next Auth, Sessions & Google Provider

1. Google OAuth Setup.mp4

06:38

2. Next Auth & Provider Setup.mp4

08:45

3. Session Provider Wrapper.mp4

05:37

4. Sign In Button.mp4

09:30

5. Save User to Database & Session.mp4

05:57

6. Profile Image.mp4

04:39

7. Sign Out & Protect Routes.mp4

06:15

5. Create Properties & Cloudinary Integration

1. Add Property Form & Component State.mp4

12:43

2. Form Input Handlers.mp4

13:44

3. Add Property POST API Route.mp4

13:56

4. Get User & Submit To Database.mp4

13:46

5. Cloudinary Image Upload.mp4

15:54

6. Property Image Display.mp4

15:50

6. Profile & Manage Properties

1. User Profile Info Display.mp4

04:53

2. User Profile Listings.mp4

17:03

3. Deleting Properties.mp4

10:13

4. Toast Notifications.mp4

03:54

5. Edit Property Form.mp4

12:13

6. Update PUT API Route.mp4

12:31

7. Map, Bookmarks & Sharing

1. Geocoding & Mapbox Map.mp4

16:40

2. Handle Geocode Error.mp4

04:04

3. Property Page Cleanup.mp4

06:11

4. Bookmark API Route.mp4

10:28

5. Bookmark Button Request.mp4

08:27

6. Bookmark Status & Button Toggle.mp4

08:54

7. Saved Properties Page.mp4

12:17

8. Share Buttons.mp4

10:41

8. Property Search

1. Property Search Component.mp4

09:05

2. Search API Endpoint.mp4

09:55

3. Fetch Results From API.mp4

07:18

4. Display Search Results.mp4

10:48

9. Messaging System

1. Message Model & Form State.mp4

12:59

2. Message Submit & API Route.mp4

14:22

3. Require Auth For Contact Form.mp4

03:53

4. Fetch Messages.mp4

10:30

5. Display Messages.mp4

11:15

6. Mark As Read.mp4

15:19

7. Delete Messages.mp4

08:38

8. Order New First.mp4

03:25

9. New Message Count Display.mp4

11:05

10. Global Context For Unread Messages.mp4

11:06

10. Pagination, Featured, Lightbox & Deploy

1. Properties Client Component Refactor.mp4

06:33

2. Implement Pagination.mp4

08:55

3. Pagination Component.mp4

09:31

4. Photoswipe Lightbox.mp4

06:37

5. Fetch Featured Properties.mp4

06:53

6. Featured Property Component.mp4

13:11

7. Deploy To Vercel.mp4

11:04

Description

Build a real-world project using Next.js 14 and MongoDB

What You'll Learn?

Learn The Fundamentals of Next JS 14
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 API Routes
Internal Messaging, Bookmarks, Search, Image Lightboxes, Pagination+
Implement Cloudinary for Image Storage & Optimization

Who is this for?

People that understand React that want to start building more powerful websites and applications with Next JS

What You Need to Know?

You should have basic knowledge of JavaScript and React

More details

Description
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
RESTful API routes
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 with API routes.

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

Who this course is for:
People that understand React that want to start building more powerful websites and applications with Next JS

User Reviews

Rating

average 0

Total votes0

Focused display

Next JS

Brad Traversy

Instructor's Courses

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.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.