Udemy - Next.js From Scratch

What you'll 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

Requirements

You should have basic knowledge of JavaScript and React

Description

This is a project based course that will teach you how to use Next.js in the real world. We use the Next.js framework 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

Who this course is for:

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