Next.js 14 from Scratch
Ends soon! Keep adding new skills with 10,000+ programs for $239 (usually $399). Save now.
Next.js 14 from Scratch
Included with
Learn more
Recommended experience
Recommended experience
What you'll learn
Build and deploy a full-stack Next.js application with dynamic data handling.
Integrate user authentication with Google OAuth and manage sessions securely.
Design and implement responsive UI components, including navigation bars and property listings.
Work with MongoDB and create robust API routes for CRUD operations.
Skills you'll gain
Details to know
11 assignments
See how employees at top companies are mastering in-demand skills
There are 10 modules in this course
Updated in May 2025.
This course now features Coursera Coach! A smarter way to learn with interactive, real-time conversations that help you test your knowledge, challenge assumptions, and deepen your understanding as you progress through the course. This comprehensive course is designed to equip you with the skills needed to build modern, high-performance web applications using Next.js 14. You'll learn how to create dynamic websites with ease, leveraging server-side rendering, API routes, and authentication systems. By the end of the course, you'll be able to develop and deploy a full-stack property rental platform. The course begins with a deep dive into the fundamentals of Next.js, including understanding its core features, setting up your development environment, and building a project from scratch. You'll start by creating a property rental website, PropertyPulse, and will walk through essential Next.js features such as file-based routing, components, and conditional rendering. As the course progresses, you'll learn how to integrate a MongoDB database, set up API routes for CRUD operations, and implement advanced features like user authentication with Google OAuth. You'll build a robust backend using Mongoose to handle database interactions and explore the creation of dynamic property pages, bookmarking, and messaging functionalities. This course is ideal for developers with some basic understanding of JavaScript and React who want to take their skills to the next level with Next.js. You'll learn practical techniques for building, managing, and deploying full-stack applications, including integration with external tools like Cloudinary and Vercel. If you're interested in developing modern web applications, this course offers an in-depth and hands-on experience.
In this module, we will introduce the course structure and its objectives, provide an overview of the PropertyPulse project that you'll be building, explain what Next.js is and why it's preferred for React-based web development, and guide you through setting up your development environment to get started.
What's included
4 videos1 reading
4 videosβ’Total 24 minutes
- Welcome To The Courseβ’3 minutes
- PropertyPulse Project Demoβ’9 minutes
- What Is Next.js?β’9 minutes
- Environment Setupβ’4 minutes
1 readingβ’Total 10 minutes
- Full Course Resourcesβ’10 minutes
In this module, we will dive into the fundamentals of Next.js, from setting up your project and understanding folder structure, to designing key components like the navbar and homepage. You'll learn how to work with file-based routing, server/client components, and build interactive, dynamic pages like property listings. Additionally, you'll enhance user experience with custom 'Not Found' and 'Loading' pages.
What's included
12 videos1 assignment
12 videosβ’Total 120 minutes
- New Project & Folder Structureβ’6 minutes
- Layout, Homepage & Metadataβ’11 minutes
- File-Based Routingβ’7 minutes
- Server vs Client Components & Router Hooksβ’10 minutes
- Start On The Navbarβ’10 minutes
- Navbar Links, Dropdowns & React Iconsβ’12 minutes
- Active Links & Conditional Renderingβ’12 minutes
- Homepage Componentsβ’16 minutes
- Properties Pageβ’7 minutes
- Property Card Dynamic Dataβ’15 minutes
- Home Property Listingsβ’8 minutes
- Custom Not Found & Loading Pagesβ’6 minutes
1 assignmentβ’Total 15 minutes
- Next.js Fundamentals & Project Start - Assessmentβ’15 minutes
In this module, we will guide you through setting up a MongoDB database, connecting it to your Next.js application with Mongoose, and building essential API routes for CRUD operations. You'll learn how to fetch and display property data using server components, and develop key property-related pages, including single property views and detailed components, all while improving the user interface with loading spinners.
What's included
11 videos1 assignment
11 videosβ’Total 94 minutes
- Create MongoDB Databaseβ’9 minutes
- MongoDB Compass & Importing Dataβ’5 minutes
- Database Connection & Mongooseβ’7 minutes
- Your First API Routeβ’6 minutes
- Property & User Modelsβ’13 minutes
- Fetch Data Using Server Componentβ’10 minutes
- Requests Fileβ’4 minutes
- Fetch Single Propertyβ’11 minutes
- Single Property Pageβ’12 minutes
- Property Details Componentβ’16 minutes
- Spinner Componentβ’3 minutes
1 assignmentβ’Total 15 minutes
- Database, API Routes & Property Components - Assessmentβ’15 minutes
In this module, we will walk you through setting up Google OAuth for user authentication and integrating Next Auth to manage sessions. You'll learn how to create login and sign-out components, save user data to the database, and secure routes based on authentication status. Additionally, you'll implement profile image functionality to personalize the user experience.
What's included
7 videos1 assignment
7 videosβ’Total 47 minutes
- Google OAuth Setupβ’7 minutes
- Next Auth & Provider Setupβ’9 minutes
- Session Provider Wrapperβ’6 minutes
- Sign In Buttonβ’10 minutes
- Save User to Database & Sessionβ’6 minutes
- Profile Imageβ’5 minutes
- Sign Out & Protect Routesβ’6 minutes
1 assignmentβ’Total 15 minutes
- Next Auth, Sessions & Google Provider - Assessmentβ’15 minutes
In this module, we will guide you through the process of creating a form to add property listings, handling input data efficiently, and submitting it via a POST API route to your database. You'll also integrate Cloudinary to allow users to upload property images and display them with high quality, enhancing the visual appeal of your property listings.
What's included
6 videos1 assignment
6 videosβ’Total 86 minutes
- Add Property Form & Component Stateβ’13 minutes
- Form Input Handlersβ’14 minutes
- Add Property POST API Routeβ’14 minutes
- Get User & Submit To Databaseβ’14 minutes
- Cloudinary Image Uploadβ’16 minutes
- Property Image Displayβ’16 minutes
1 assignmentβ’Total 15 minutes
- Create Properties & Cloudinary Integration - Assessmentβ’15 minutes
In this module, we will focus on enhancing user profiles, enabling them to manage and update their property listings. You'll learn how to implement features for viewing, editing, and deleting properties, while using toast notifications to provide real-time feedback. Additionally, you'll set up a PUT API route to ensure property data remains accurate and up-to-date.
What's included
6 videos1 assignment
6 videosβ’Total 61 minutes
- User Profile Info Displayβ’5 minutes
- User Profile Listingsβ’17 minutes
- Deleting Propertiesβ’10 minutes
- Toast Notificationsβ’4 minutes
- Edit Property Formβ’12 minutes
- Update PUT API Routeβ’13 minutes
1 assignmentβ’Total 15 minutes
- Profile & Manage Properties - Assessmentβ’15 minutes
In this module, we will explore how to enhance your property pages with interactive maps using Mapbox and geocoding, ensuring a dynamic and engaging user experience. You'll also implement bookmarking functionality, allowing users to save and revisit their favorite properties, while adding social media share buttons to expand the reach of listings.
What's included
8 videos1 assignment
8 videosβ’Total 78 minutes
- Geocoding & Mapbox Mapβ’17 minutes
- Handle Geocode Errorβ’4 minutes
- Property Page Cleanupβ’6 minutes
- Bookmark API Routeβ’10 minutes
- Bookmark Button Requestβ’8 minutes
- Bookmark Status & Button Toggleβ’9 minutes
- Saved Properties Pageβ’12 minutes
- Share Buttonsβ’11 minutes
1 assignmentβ’Total 15 minutes
- Map, Bookmarks & Sharing - Assessmentβ’15 minutes
In this module, we will guide you through building a property search feature, from creating a search component and setting up an API endpoint to fetch results. You'll learn how to display the results dynamically and organize them in an intuitive way, providing users with an efficient way to find properties that meet their needs.
What's included
4 videos1 assignment
4 videosβ’Total 37 minutes
- Property Search Componentβ’9 minutes
- Search API Endpointβ’10 minutes
- Fetch Results From APIβ’7 minutes
- Display Search Resultsβ’11 minutes
1 assignmentβ’Total 15 minutes
- Property Search - Assessmentβ’15 minutes
In this module, we will walk you through building a messaging system where users can send and receive messages securely. Youβll learn how to set up the message model, create a contact form, and handle message submissions through an API route. Additionally, youβll implement features to fetch, display, organize, and manage messages, including marking them as read, deleting them, and tracking unread messages.
What's included
10 videos1 assignment
10 videosβ’Total 103 minutes
- Message Model & Form Stateβ’13 minutes
- Message Submit & API Routeβ’14 minutes
- Require Auth For Contact Formβ’4 minutes
- Fetch Messagesβ’11 minutes
- Display Messagesβ’11 minutes
- Mark As Readβ’15 minutes
- Delete Messagesβ’9 minutes
- Order New Firstβ’3 minutes
- New Message Count Displayβ’11 minutes
- Global Context For Unread Messagesβ’11 minutes
1 assignmentβ’Total 15 minutes
- Messaging System - Assessmentβ’15 minutes
In this module, we will focus on optimizing the properties client component for performance, then add pagination to handle large sets of property listings. Youβll also integrate the Photoswipe lightbox for improved image viewing, create a featured property section to draw attention to select listings, and guide you through the process of deploying your Next.js application to Vercel to make it accessible to users worldwide.
What's included
7 videos3 assignments
7 videosβ’Total 63 minutes
- Properties Client Component Refactorβ’7 minutes
- Implement Paginationβ’9 minutes
- Pagination Componentβ’10 minutes
- Photoswipe Lightboxβ’7 minutes
- Fetch Featured Propertiesβ’7 minutes
- Featured Property Componentβ’13 minutes
- Deploy To Vercelβ’11 minutes
3 assignmentsβ’Total 90 minutes
- Full Course Practice Assessmentβ’15 minutes
- Pagination, Featured, Lightbox & Deploy - Assessmentβ’15 minutes
- Full Course Assessmentβ’60 minutes
Instructor
Offered by
Explore more from Software Development
- Status: PreviewS
SkillsBooster Academy
Course
- Status: PreviewC
Coursera
Course
- Status: Free TrialS
Scrimba
Course
Why people choose Coursera for their career
Frequently asked questions
Yes, you can preview the first video and view the syllabus before you enroll. You must purchase the course to access content not included in the preview.
If you decide to enroll in the course before the session start date, you will have access to all of the lecture videos and readings for the course. Youβll be able to submit assignments once the session starts.
Once you enroll and your session begins, you will have access to all videos and other resources, including reading items and the course discussion forum. Youβll be able to view and submit practice assessments, and complete required graded assignments to earn a grade and a Course Certificate.
More questions
Financial aid available,
