Next.js From Scratch 2024

Next.js From Scratch 2024, available at $54.99, has an average rating of 4.66, with 77 lectures, based on 649 reviews, and has 4355 subscribers.

You will learn about 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 This course is ideal for individuals who are People that understand React that want to start building more powerful websites and applications with Next JS It is particularly useful for People that understand React that want to start building more powerful websites and applications with Next JS.

Enroll now: Next.js From Scratch 2024

Summary

Title: Next.js From Scratch 2024

Price: $54.99

Average Rating: 4.66

Number of Lectures: 77

Number of Published Lectures: 77

Number of Curriculum Items: 77

Number of Published Curriculum Objects: 77

Original Price: $69.99

Quality Status: approved

Status: Live

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

Who Should Attend

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

Target Audiences

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

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

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

Course Curriculum

Chapter 1: Introduction

Lecture 1: Welcome To The Course

Lecture 2: PropertyPulse Project Demo

Lecture 3: What Is Next.js?

Lecture 4: Next.js Features

Lecture 5: Environment Setup

Lecture 6: Project Theme Files

Chapter 2: Next.js Fundamentals & Project Start

Lecture 1: New Project & Tailwind Config

Lecture 2: Layout & Homepage

Lecture 3: Metadata & Assets

Lecture 4: File-Based Routing

Lecture 5: Server vs Client Components

Lecture 6: Client Component & Navigation Hooks

Lecture 7: Navbar Component Start

Lecture 8: Navbar Links, Dropdown State, Icons

Lecture 9: Active Links & Conditional Rendering

Lecture 10: Homepage Components & Footer

Lecture 11: Properties Page & PropertyCard Component

Lecture 12: Home Property Listings

Lecture 13: Custom Not Found & Loading Pages

Chapter 3: MongoDB Database, Server Components & Fetching Properties

Lecture 1: Create MongoDB Database

Lecture 2: MongoDB Compass & Importing Data

Lecture 3: Database Connection & Mongoose

Lecture 4: Property & User Models

Lecture 5: Fetch Data Using Server Component

Lecture 6: Single Property & Header Image

Lecture 7: Property Details Component

Lecture 8: Intro To API Routes

Chapter 4: Next Auth, Sessions & Google Provider

Lecture 1: What Is Next Auth?

Lecture 2: Google OAuth Setup

Lecture 3: Next Auth & Provider Setup

Lecture 4: Sign In Button

Lecture 5: Save User to Database & Session

Lecture 6: Profile Image

Lecture 7: Sign Out Button

Lecture 8: Protecting Routes

Chapter 5: Server Actions & Creating Properties

Lecture 1: Add Property Form

Lecture 2: Server Actions

Lecture 3: Format Property Data

Lecture 4: Get User From Session

Lecture 5: Remove Try/Catch From getSessionUser

Lecture 6: Submit Property To Database

Lecture 7: Custom Error Page

Lecture 8: Cloudinary Image Upload

Lecture 9: PropertyCard & Header Images

Lecture 10: PropertyImages Component

Chapter 6: Profile & Manage Properties

Lecture 1: User Profile Info Display

Lecture 2: User Profile Listings

Lecture 3: Searialize Lean Documents

Lecture 4: Deleting Properties

Lecture 5: Toast Notifications

Lecture 6: Edit Property Form

Lecture 7: Update Property Action

Chapter 7: Map, Bookmarks & Sharing

Lecture 1: Geocode For Latitude & Longitude

Lecture 2: Mapbox Map Display

Lecture 3: Property Page Sidebar

Lecture 4: Bookmark Property Action

Lecture 5: Bookmark Button Functionality

Lecture 6: Check Bookmark Status

Lecture 7: Saved Properties Page

Lecture 8: Share Buttons

Chapter 8: Property Search

Lecture 1: Property Search Component

Lecture 2: Fetch Search Results

Lecture 3: Display Search Results

Chapter 9: Messaging System

Lecture 1: Message Model & addMessage Action

Lecture 2: Submit Message & useFormState Hook

Lecture 3: useFormStatus Hook

Lecture 4: Fetch Messages

Lecture 5: Display Messages

Lecture 6: Mark As Read

Lecture 7: Delete Messages

Lecture 8: Global Context For Message Count

Lecture 9: Get Unread Message Count

Chapter 10: Pagination, Featured, Lightbox & Deploy

Lecture 1: Pagination Logic

Lecture 2: Pagination Component

Lecture 3: Photoswipe Lightbox

Lecture 4: Featured Properties

Lecture 5: Deploy To Vercel

Instructors

Brad Traversy
Full Stack Web Developer & Instructor at Traversy Media

Rating Distribution

1 stars: 3 votes

2 stars: 5 votes

3 stars: 37 votes

4 stars: 151 votes

5 stars: 453 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!