OpenCourser brand icon
Sign in
We may earn an affiliate commission when you visit our partners.
Course image
Udemy logo

Next.js - Build Full Stack Apps with Next.js & TypeScript

Ghulam Abbas

If you want to build a Full-stack App in React (Next js) or if you want to learn how to implement server-side rendering then welcome to this Ultimate Next.js course.

Read more

If you want to build a Full-stack App in React (Next js) or if you want to learn how to implement server-side rendering then welcome to this Ultimate Next.js course.

In this course, we will use Next js which is a production-ready React.js framework. This is one of the most powerful tools with its three most key features:

  • File-based routing

  • Server-Side Rendering

  • Full-stack application development

And in this course, we are going to use all these features and implement them in our project. Not only this, but we will also learn How we can implement Redux for state management in Next.js with Server Side Rendering.

We will use next-auth which is the most popular package used with next for ultimate and powerful authentication.

We will make a full-stack Hotel Booking Application that is only built with Next.js.

We will integrate Stripe Payment Gateway to accept payment from users and follow the best practices for that.

I always respond as fast as I can. Because I know there’s nothing worse than getting stuck into problems, especially programming problems. So, I am always here to support you.

You can watch the complete DEMO of this project in the course content. If you are ready to build Production-Ready, Full Stack, Server Side Rendered Apps then I will see you in the course.

Course Content:

  • Setting up Environment

  • Why Next.js?

  • Starting BookIT Project with Next.js

  • Adding Rooms Resource

  • Custom Error Handling

  • Adding Filters, Search, Pagination

  • Let's start BookIT Frontend

  • Data Fetching in Next.js

  • Implementing Redux for State Management

  • Adding Pagination, Search on Frontend

  • Authentication with next-auth

  • Protected Routes & Handle User

  • Handle Room Bookings

  • Adding Stripe for Payments

  • Handle Room Reviews

  • Admin Routes - Part 1

  • Admin Routes - Part 2

  • Deploying on Vercel

Enroll now

12 deals to help you save

We found 12 deals and offers that may be relevant to this course.
Save money when you learn. All coupon codes, vouchers, and discounts are applied automatically unless otherwise noted.
Use code at checkout. Only 4 days left!
Get skills that impress
Learn from courses across popular topics and take big discounts during this 48-hour sale.
Up to
80%
off
ST20MT111124A
Use code at checkout. Valid until December 1
For new customers
Save when you purchase top courses. For new customers only.
Special Offer
UDEAFNULP2024
Valid for a limited time only
Future-proof your career
Access O'Reilly books, live events, courses, and more. Save with an annual subscription.
Take
15%
off

What's inside

Learning objectives

  • Learn all important features of next js
  • Learn server side rendering with next
  • Learn how file base routing works in next
  • Learn all different ways to pre fetch data
  • Learn how to build full react stack application in next js
  • Learn how to build production ready react apps
  • Learn how to implement authentication with next-auth
  • Learn how to implement redux properly for state management in next
  • Learn how to integrate modern payment gateway like stripe
  • Learn how to integrate third party image hosting server like cloudinary
  • Learn how to handle errors properly
  • Learn how to deploy full stack app on vercel
  • Show more
  • Show less

Syllabus

Introduction
Introduction of Course
Project (BookIT) Complete Demo
Setting up Environment
Read more
Installing all required tools
Install MongoDB Community Server
How to get the Source Code?
Get BookIT Source Code Details
Why Next.js?
What is Next.js?
File Base Routing & Full Stack Apps
Server Side Rendering
Starting BookIT Project with Next.js
Installing Next.js & Understanding Folder Structure
Starting with Backend API
Setting Up Postman Environment
Connecting to MongoDB
Adding Rooms Resource
Creating Room Model
Create & Save Room - ADMIN
Fetch all Rooms
Creating Data Seeder
Get single Room Details
Update Room - ADMIN
Delete Room - ADMIN
Custom Error Handling
Create Error Handler Class
Global Async Error Handler
Validation & Mongoose ID Error
Adding Filters, Search, Pagination
Search Rooms by Location
Filter Rooms
Adding Pagination
Let's start BookIT Frontend
BookIT HTML & CSS Details
Setting up layout & Global Provider
Header & Footer Component
BookIT Homepage
Add hot-toast for messages/errors
Data Fetching, Caching, Revalidating
Server Component vs Client Component
Data Fetching
Data Caching
Data Revalidating
Handle Error, Room, Room Details & more
Fetch All Rooms & Handle error
Render all Rooms
Fetch Room Details & Set Dynamic title
Render Room Details
Pagination, Search - Frontend
Search Rooms Component
Adding additional options in Search
Authentication with next-auth
Create User Model
Register User and Encrypt Password
Handle User Login on Backend
Login User Component
Get Session & Show User in Header
Logout User & Placeholder
Integrating Redux Toolkit
Creating Redux toolkit store
Add user to the State
RTK Query Mutation & Register User
Protected Routes & Handle User
Update User Profile Endpoint
Protect Backend API Routes
Update User Profile Component
Update User Session
Protect Frontend Routes with Middleware
Nested User Layout
Update Password Endpoint & Fix err Message
Handle Mongoose Duplicate Key Error
Update Password Component
Configure Cloudinary to Upload & Delete File
Upload User Avatar Endpoint
Upload User Avatar Component
Fix User Sidebar Menu BUG!
Forgot & Reset Password
Generate Forgot Password token
Setup Nodemailer & Email HTML Template
Send Password Recovery Email
Handle Forgot Password Component
Handle New Password Endpoint
Handle New Password Component
Generate & Render Room Map
Setup Node GeoCoder with MapQuest
Generate & Save Map Coordinates
Render Map on the Room Details Page
Handle Room Bookings & Invoice
Create Booking Model
Display Date Range Picker
Create & Save New Booking
Handle Room Availability Endpoint
Handle Room Availability
Get all booked dates of Room
Disable Booked dates on Calendar
Current User Bookings & Booking Details Endpoint
Get current user Bookings
getAuthHeader() for protected endpoints

Good to know

Know what's good
, what to watch for
, and possible dealbreakers
Ideal for aspiring full-stack developers, this course provides a thorough understanding of the Next.js framework and its key features, including file-based routing, server-side rendering, and full-stack application development
Taught by an experienced professional, this course offers access to expert knowledge and guidance, enhancing the learning experience
With a strong focus on practical implementation, this course prepares learners to build production-ready, full-stack, server-side rendered applications
Leveraging popular technologies like Redux and next-auth, this course introduces industry-standard tools for state management and authentication
Integrating Stripe for payment processing provides a valuable real-world skill for handling transactions in full-stack applications
Please note that this course covers an older version of Next.js (12.2.3), which may require adaptation for newer versions

Save this course

Save Next.js - Build Full Stack Apps with Next.js & TypeScript to your list so you can find it easily later:
Save

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Next.js - Build Full Stack Apps with Next.js & TypeScript with these activities:
Build a simple NextJS project
Reinforce your understanding of NextJS by completing a full project.
Show steps
  • Set up your NextJS project using create-next-app
  • Create a simple page with a form for user input
  • Handle user input from the form and display it
Follow a NextJS tutorial
Learn about NextJS features and best practices by following a guided tutorial.
Show steps
  • Find a reputable NextJS tutorial online
  • Work through the tutorial step-by-step
  • Experiment with the code and try different things
Develop a full-stack application using NextJS
Demonstrate your proficiency by building a full-stack app with NextJS.
Show steps
  • Design the architecture and data model for your application
  • Implement the frontend using React and NextJS
  • Create the backend API using Express or another framework
  • Integrate the frontend and backend
  • Test and deploy your application
Show all three activities

Career center

Learners who complete Next.js - Build Full Stack Apps with Next.js & TypeScript will develop knowledge and skills that may be useful to these careers:

Reading list

We haven't picked any books for this reading list yet.

Share

Help others find this course page by sharing it with your friends and followers:
Facebook
LinkedIn
Reddit
X
Link
Email

Similar courses

Here are nine courses similar to Next.js - Build Full Stack Apps with Next.js & TypeScript.
Complete React, Next.js & TypeScript Projects Course 2024
Most relevant
Next.js by Example
Most relevant
Next.js From Scratch 2024
Most relevant
Full Stack Markdown App With Next.js
Most relevant
Full Stack LinkedIn Prototype With Next.js
Most relevant
React 18 with Next.js Playbook
Most relevant
Next.js 14 & React - The Complete Guide
Most relevant
MERN Stack Front To Back: Full Stack React, Redux &...
Most relevant
The complete guide to building a full-stack app with...
Most relevant
Course image
Effort
31.5 total hours
Via
Udemy
Instructor
Ghulam Abbas
Language
English
Good to know
Ideal for aspiring full-stack developers, this course provides a thorough understanding of the Next.js framework and its key features, including file-based routing, server-side rendering, and full-stack application development
Taught by an experienced professional, this course offers access to expert knowledge and guidance, enhancing the learning experience
With a strong focus on practical implementation, this course prepares learners to build production-ready, full-stack, server-side rendered applications
Leveraging popular technologies like Redux and next-auth, this course introduces industry-standard tools for state management and authentication
Integrating Stripe for payment processing provides a valuable real-world skill for handling transactions in full-stack applications
Please note that this course covers an older version of Next.js (12.2.3), which may require adaptation for newer versions
Share and help others discover this course.
Facebook LinkedIn X Reddit Link Email
Don't miss out
Enroll today to gain access to this course
Enroll in this course
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2024 OpenCourser