VOOZH about

URL: https://www.coursera.org/learn/packt-nextjs-14-from-scratch-aoktp

⇱ Next.js 14 from Scratch | Coursera


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

Gain insight into a topic and learn the fundamentals.
Intermediate level

Recommended experience

2 weeks to complete
at 10 hours a week
Flexible schedule
Learn at your own pace

Gain insight into a topic and learn the fundamentals.
Intermediate level

Recommended experience

2 weeks to complete
at 10 hours a week
Flexible schedule
Learn at your own pace

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.

Details to know

Shareable certificate

Add to your LinkedIn profile

Assessments

11 assignments

Taught in English

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

Packt
1,946 Coursesβ€’575,115 learners

Explore more from Software Development

Why people choose Coursera for their career

πŸ‘ Image

Felipe M.

Learner since 2018
"To be able to take courses at my own pace and rhythm has been an amazing experience. I can learn whenever it fits my schedule and mood."
πŸ‘ Image

Jennifer J.

Learner since 2020
"I directly applied the concepts and skills I learned from my courses to an exciting new project at work."
πŸ‘ Image

Larry W.

Learner since 2021
"When I need courses on topics that my university doesn't offer, Coursera is one of the best places to go."
πŸ‘ Image

Chaitanya A.

"Learning isn't just about being better at your job: it's so much more than that. Coursera allows me to learn without limits."

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.

If you complete the course successfully, your electronic Course Certificate will be added to your Accomplishments page - from there, you can print your Course Certificate or add it to your LinkedIn profile.

This course is currently available only to learners who have paid or received financial aid, when available.

Yes. In select learning programs, you can apply for financial aid or a scholarship if you can’t afford the enrollment fee. If fin aid or scholarship is available for your learning program selection, you’ll find a link to apply on the description page.

Financial aid available,