Next.js 14 from Scratch

Packt via Coursera

Go to class Write review

Details

Go to class

Provider

Coursera
Pricing

Free Online Course (Audit)
Languages

English
Certificate

Paid Certificate Available
Duration & workload

15 hours 16 minutes
Sessions

On-Demand
Subtitles

English

Found in

Overview

Coursera Plus Monthly Sale:

All Certificates & Courses 40% Off!

Grab it

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.

Syllabus

Introduction

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.

Next.js Fundamentals & Project Start

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.

Database, API Routes & Property Components

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.

Next Auth, Sessions & Google Provider

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.

Create Properties & Cloudinary Integration

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.

Profile & Manage Properties

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.

Map, Bookmarks & Sharing

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.

Property Search

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.

Messaging System

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.

Pagination, Featured, Lightbox & Deploy

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.