Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

13h 46mIntermediate2026-02-23

Authors

Packt Publishing

Course details

Begin your Next.js journey by exploring core concepts, differences from React, and project setup. Learn App Router and Pages Router, enabling seamless navigation, and find out how to use dynamic routing, API handling, global layouts, and optimized rendering. You'll also cover image optimization, CSS modules, and caching techniques, ensuring high-performance applications. Next, dive into database integration with SQLite and Prisma ORM to manage data efficiently. Learn how to implement authentication using JWT, cookies, and secure middleware, while building a fully functional ecommerce platform with product listings, shopping carts, and payment systems with Stripe. Finally, get tips on how to master CI/CD pipelines, MySQL migration, and application deployment to Vercel. This course is an ideal fit for React developers transitioning to Next.js, junior and midlevel engineers, and experienced developers upskilling in caching, authentication, and deployment.

Learning objectives
Build scalable applications with NextJS App Router and Pages Router.
Implement secure authentication using JWT cookies and middleware.
Develop a shopping cart with product filtering and checkout system.
Optimize performance with caching server-side rendering and APIs.
Integrate databases using SQLite Prisma ORM and API development.
Deploy applications with CI/CD MySQL migration and Vercel hosting.

Concepts

Introduction

Introduction
Next.js in spite of React
RQ - Next.js in spite of React
Creating first project
RQ - Creating first project
Project structure
RQ - Project structure
Pages Router vs. App Router
RQ - Pages Router vs. App Router
React (client side) vs. Next.js (server side)

Next.js Basics with App Router

Defining routes
Nested routes
Linking pages
Understanding global layout
Creating global header component
The import alias
Configuring favicon using image files
Configuring favicon using code
Component basics
Component - Autooptimization feature
RQ - Component autooptimization feature
Styling - Global CSS and CSS modules
RQ - Styling global CSS and CSS modules
React server component vs. client component
RQ - React server component vs. client component
Error page
Not found page
Dynamic routes and route params
Making API calls in Next.js
Asynchronous server components
RQ - Asynchronous server components
Implementing loading component

SQLite Basics

Introduction to SQLite
Data types in SQLite
Creating SQLite database

Next.js with SQLite

Introduction
Setting up database with better-sqlite3
Table creation and adding data
Rendering data in next app
Configuring dynamic routes for products
Refactoring the code structure
Manually configuring Tailwind CSS
Creating add product interface
Handling form submission with server action
Executing query and redirecting with redirect()
Creating products grid interface
RQ - Creating products grid interface
Implementing delete product feature
Implementing edit functionality

Caching in Next.js

Understanding caching in Next.js
RQ - Understanding caching in Next.js
Unexpected behaviour in project build
RQ - Unexpected behaviour in project build
Static to dynamic - Cache control
RQ - Static to dynamic cache control
Time-based cache control
RQ - Time-based cache control
Path-based revalidation
RQ - Path-based revalidation
Revalidating with revalidateTag()
RQ - Revalidating with revalidateTag()

Pages Router

Introduction to Pages Router
RQ - Introduction to Pages Router
Routing with Pages Router
Extracting the slug from dynamic path
Catch-all segments in Pages Router
RQ - Catch-all segments in Pages Router
Adding global interface
Linking and navigation

Prisma with SQLite

Introduction to Prisma
RQ - Introduction to Prisma
Setting up Prisma
Creating Prisma client
Inserting data using create()
Inserting data using createMany()
All possibilities of record deletion - delete() and deleteMany()
Fetching data with Prisma
Updating records with Prisma
The upsert() method

MyStore - Admin Section

Introduction
Project creation
Creating sidebar component
Working on sidebar
Combining utility classes with @apply
RQ - @layer and @apply combining utility classes
Styling the sidebar
Adding icons to the sidebar
Creating users page
Creating add users form
Implementing component-based architecture
Creating button and input components
Refactoring code structure
Database creation
Adding users with server action
Implementing hashing
RQ - Implementing hashing
Validating user creation
Rendering users in the table
Creating edit user page
Dynamic default values for edit
Updating user data
Deleting user
Creating delete confirmation popup
Enabling confirmation popup
Deleting user by confirmation popup
Creating product type page
Creating add product type page
Adding product types and products models into the schema
RQ - Adding models in the schema product type and product
Adding product type using server action
Rendering product types into the table
Creating edit product type page
Dynamic default values for product type
Updating product type with server action
Deleting product type with server action
Creating products page
Creating products interface for listing
Creating add product page
Completing add products form
Creating switch component
Creating file input component
Rendering dynamic product types data in add product page
Creating server action for adding products
Implementing image storage functionality
Completing add product functionality
Rendering dynamic data in products table
Creating edit product page
Dynamic default values for product
Render default values in switch and file input
Updating product with server action
RQ - Updating product with server action
Deleting product with server action

MyStore - Client Section

Initiating client section
Creating header component
Implementing search bar
Joining Tailwind classes with ideal approach
RQ - Joining Tailwind classes with ideal approach
Adding profile drop-down
useRef() hook
Close profile drop-down menu on outside click
RQ - Close profile drop-down menu on outside click
Creating input component
Creating home page
Creating filters section
Creating custom accordion component
RQ - Creating custom accordion component
Completing custom accordion component
Continue on filter section
Creating price range slider component
Creating product card component
Completing product card component
Creating button component
API creation for product listing
Dynamic product rendering using server action
API creation for fetching product types
Dynamic product type rendering using API
Set filter values into the search params
Modifying products API to apply filters
Filter functionality on client side
Search filter functionality
Creating product page
Completing product page
API creation for fetching a product by its ID
Dynamic product details rendering using API
Rendering products based on status
Creating cart page
Rendering cart item card
Completing the cart UI
Creating context for handling products
RQ - Creating context for handling products
Implement cart functionalities
Making cart page dynamic
Enabling quantity selection
Finishing dynamic cart page

MyStore - Authentication

Creating login page
Introduction of JOSE and JWT
Setup authentication flow using JOSE and JWT
Create server action for login
Cookie-based authentication
RQ - Cookie-based authentication
Handling private and public routes using middleware
Fetching authenticated user data
Implementing logout with server action
Authenticate all the server actions of admin section
Creating the authentication routes on the client section
Creating interface for authentication routes
Creating buyer table in the database
Creating sign-up API
Testing sign-up API using Postman
Creating login API
Testing the login API using Postman
Implementing sign-up functionality in the client section
Implementing customer login functionality
API to fetch unique customer data
Fetching customer data using API in the client section
Logout functionality in the client section

MyStore - Payment Gateway and Sales

Introduction
RQ - Introduction
Basic configurations of Stripe
Rendering Stripe's embedded checkout form
Creating checkout session dynamically
Creating payment status page
Creating sales and transaction table in database
API to update database after successful checkout
Testing the checkout API using Postman
Integrating checkout API in the client section
Creating buyer master section
Fetching buyers list using server action

MyStore - Reports and Analysis (Charts)

Introduction
Preparing customers and buyers report
Rendering customers and buyers report
Preparing total revenue report
Preparing recent order report
Creating purchased products modal
Fetching purchased products in modal
Render products in the purchased products table
Implementing chart using Recharts
Preparing sales report using chart
Rendering sales chart with dynamic values
Preparing customers report using chart
Creating chart section component

MyStore - Deployment

Introduction
RQ - Introduction
Introduction to CI CD
RQ - Introduction to CI CD
GitHub integration
RQ - GitHub integration
Database migration from SQLite to MySQL
Link the MySQL database to admin application
Deploying admin app on Vercel
Deploying client app on Vercel