Danh mục
Duocmmo Tedu Tin học văn phòng Laravel Cyberlearn Khoá học miễn phí Tất cả khoá học
Get link khoá học
Trang chủ
Development
Web Development
Next.js
Next.js From Scratch 2024

Next.js From Scratch 2024

Loại khoá học: Web Development

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

image
50.000 VND
399.000 VND
Đầy Đủ Bài Giảng
Học Online Tiện Lợi
Kích Hoạt Nhanh 2-5 Phút
Thanh toán tự động
Được phép tải xuống

Tổng quan

Nội dung khoá học

Đánh giá

Mô tả

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


Bạn sẽ học được gì

Yêu cầu

Nội dung khoá học

10 sections

Introduction

4 lectures
Welcome To The Course
02:37
PropertyPulse Project Demo
08:35
What Is Next.js?
08:44
Environment Setup
04:10

Next.js Fundamentals & Project Start

12 lectures
New Project & Folder Structure
06:13
Layout, Homepage & Metadata
10:47
File-Based Routing
07:16
Server vs Client Components & Router Hooks
09:44
Start On The Navbar
10:03
Navbar Links, Dropdowns & React Icons
12:28
Active Links & Conditional Rendering
11:47
Homepage Components
15:45
Properties Page
07:26
Property Card Dynamic Data
14:41
Home Property Listings
07:42
Custom Not Found & Loading Pages
05:58

Database, API Routes & Property Components

11 lectures
Create MongoDB Database
08:44
MongoDB Compass & Importing Data
04:36
Database Connection & Mongoose
06:31
Your First API Route
06:05
Property & User Models
12:30
Fetch Data Using Server Component
09:48
Requests File
04:25
Fetch Single Property
10:51
Single Property Page
11:54
Property Details Component
15:34
Spinner Component
02:37

Next Auth, Sessions & Google Provider

7 lectures
Google OAuth Setup
06:38
Next Auth & Provider Setup
08:45
Session Provider Wrapper
05:37
Sign In Button
09:30
Save User to Database & Session
05:57
Profile Image
04:39
Sign Out & Protect Routes
06:15

Create Properties & Cloudinary Integration

6 lectures
Add Property Form & Component State
12:43
Form Input Handlers
13:44
Add Property POST API Route
13:56
Get User & Submit To Database
13:46
Cloudinary Image Upload
15:54
Property Image Display
15:50

Profile & Manage Properties

6 lectures
User Profile Info Display
04:53
User Profile Listings
17:03
Deleting Properties
10:13
Toast Notifications
03:54
Edit Property Form
12:13
Update PUT API Route
12:31

Map, Bookmarks & Sharing

8 lectures
Geocoding & Mapbox Map
16:40
Handle Geocode Error
04:04
Property Page Cleanup
06:11
Bookmark API Route
10:28
Bookmark Button Request
08:27
Bookmark Status & Button Toggle
08:54
Saved Properties Page
12:17
Share Buttons
10:41

Property Search

4 lectures
Property Search Component
09:05
Search API Endpoint
09:55
Fetch Results From API
07:18
Display Search Results
10:48

Messaging System

10 lectures
Message Model & Form State
12:59
Message Submit & API Route
14:22
Require Auth For Contact Form
03:53
Fetch Messages
10:30
Display Messages
11:15
Mark As Read
15:19
Delete Messages
08:38
Order New First
03:25
New Message Count Display
11:05
Global Context For Unread Messages
11:06

Pagination, Featured, Lightbox & Deploy

7 lectures
Properties Client Component Refactor
06:33
Implement Pagination
08:55
Pagination Component
09:31
Photoswipe Lightbox
06:37
Fetch Featured Properties
06:53
Featured Property Component
13:11
Deploy To Vercel
11:04

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

Khoá học liên quan

Appium -Mobile Testing (Android/IOS) from Scratch+Frameworks

Appium -Mobile Testing (Android/IOS) from Scratch+Frameworks

95 VND
50.000 VND
Appium - Mobile Testing with Latest 2.0 and Live Projects

Appium - Mobile Testing with Latest 2.0 and Live Projects

70 VND
50.000 VND
Deep Learning for Object Detection with Python and PyTorch

Deep Learning for Object Detection with Python and PyTorch

899.000 VND
50.000 VND
Full Android Development Masterclass | 14 Real Apps-46 Hours

Full Android Development Masterclass | 14 Real Apps-46 Hours

1.699.000 VND
50.000 VND
Go Java Full Stack with Spring Boot and Angular

Go Java Full Stack with Spring Boot and Angular

90 VND
50.000 VND
Machine Learning Practical Workout | 8 Real-World Projects

Machine Learning Practical Workout | 8 Real-World Projects

79 VND
50.000 VND
WordPress 2024: The Complete WordPress Website Course

WordPress 2024: The Complete WordPress Website Course

90 VND
50.000 VND
Android App Development Master Course with Java | Android

Android App Development Master Course with Java | Android

99 VND
50.000 VND
Unreal Engine 5: Soulslike Melee Combat System

Unreal Engine 5: Soulslike Melee Combat System

1.399.000 VND
50.000 VND
ASP.NET Core Web Application Using Razor Pages

ASP.NET Core Web Application Using Razor Pages

1.699.000 VND
50.000 VND
Build Undetectable Malware Using C Language: Ethical Hacking

Build Undetectable Malware Using C Language: Ethical Hacking

75 VND
50.000 VND
Angular - The Complete Guide (2024 Edition)

Angular - The Complete Guide (2024 Edition)

120 VND
50.000 VND
.NET 8 Microservices: DDD, CQRS, Vertical/Clean Architecture

.NET 8 Microservices: DDD, CQRS, Vertical/Clean Architecture

100 VND
50.000 VND
Unreal Engine 5: The Complete Beginner's Course

Unreal Engine 5: The Complete Beginner's Course

1.899.000 VND
50.000 VND
Complete WordPress Developer Course 2023 - Plugins & Themes

Complete WordPress Developer Course 2023 - Plugins & Themes

1.999.000 VND
50.000 VND
The Data Science Course: Complete Data Science Bootcamp 2024

The Data Science Course: Complete Data Science Bootcamp 2024

140 VND
50.000 VND
image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.

Get khoá học cho tôi