Next.js 16 Full-Stack Project Course for Developers | 2026.

Create a public GitHub repository for a Next.js app, add a readme and gitignore, then clone the repo and initialize the Next.js project in the local folder.

Create a Next project via the official quick start using the CLI or npm, choose recommended defaults, and install TypeScript, Tailwind CSS, and Turbo pack.

Open Next.js 16 project in Visual Studio Code, clone and place files in repo root, install dependencies, run locally on 3000, and remove dummy data to prepare for next course.

Install and configure dependencies for a Next.js 16 full-stack project, including prisma client, axios, bcrypt, dotenv, next auth, node mailer, and uuid. Add TypeScript dev tooling and verify via package.json.

Explore the project configuration, from tsconfig.json and readme.md to postcss and package.json, and see how the app structure, public assets, and global css fit together.

Initialize prisma to generate schema.prisma, prisma config, and env files for Postgres or MySQL. Import env in config, install the vscode prisma extension, and use the prisma client with Nestjs.

Connect to Postgres and MySQL databases by configuring the env file, specifying credentials, host, port, and database name, and prepare the schema.prisma for future database work.

Define Prisma enums for appointment status, patient blood group, genotype, notification type, and medical specialization, and configure Postgres or MySQL providers while enabling the VS Code Prisma extension.

Define a user model with id, name, email, password, and profile picture; relate to roles, doctor, patient, and password reset codes (1 to 1, 1 to many, many to many).

Model and relate users, roles, and role assignments with a many-to-many relationship, implement password reset codes, and define doctor, patient, and appointment models.

Build and relate appointment, consultation, and notification models with doctor and patient references, 1-to-1 consultation links, and migration steps using prisma client for a postgres setup.

Migrate your models by generating the Prisma client, then push schema changes to Postgres and MySQL, ensuring the database and tables sync with your models.

Configure a global Prisma client to access your database by creating a db.ts file, exporting a global Prisma instance, and instantiating in production while reusing in development.

Define API data shapes with TypeScript types and interfaces, including a generic API response and login/registration payloads. Model users, roles, doctors, and patients, plus update and reset password types.

Create a lib/rez.ts response utility returning API responses with status, message, and data. Use it for user creation, login, and fetching user or doctor data; next, token and session management.

Explore JWT based authentication in a Next.js 16 project by generating, signing, and verifying tokens for user sessions, creating session cookies, and securing the secret in env for development.

Learn to implement session management with cookies and jwt in a Next.js and NestJS setup, including creating, storing, retrieving, and deleting secure sessions with a 72-hour expiry.

Implement a Next.js middleware to protect API routes by distinguishing public and protected routes, validating sessions via get session, and enforcing role-based access for doctors and patients with 401/403 responses.

implement middleware to protect web pages by defining protected routes, redirecting unauthenticated users to login, and routing authenticated patients or doctors to their profiles.

Create and organize Next.js 16 html email templates for welcome, appointments, and password alerts, using dynamic variables and preparing smtp setup.

Set up smtp for sending emails by generating a Gmail app password and configuring smtp.gmail.com on port 587 with your email and the generated password.

Build a reusable email service using node mailer in a Next.js 16 project, with smtp transport, html templates, variable replacement, and dedicated methods for welcome, reset, and notifications.

Implement an email service with multiple methods—welcome, password reset, password update confirmation, password change, and doctor/patient appointment notifications—using templates, variables, and env-driven links in a Next.js 16 project.

Create a registration API in Next.js 16 using the app/api/auth/register route, connect to Prisma for existing user checks, hash passwords with bcrypt, and ensure roles exist in the database.

Implement a registration route using Prisma transactions that saves a new user with name, email, and hashed password, then creates a patient or doctor profile and sends a welcome email.

design an api service using axios in a Next.js 16 project to handle authentication checks, login, registration, and logout, plus user routes and form data for profile updates.

Explore how the api service calls the register route, saves a user with Prisma, and returns a response, then manage patients, doctors, appointments, and consultations with dedicated methods.

Design and implement a responsive Next.js navbar and footer, integrate global CSS tiling, and manage authentication-driven, role-based navigation with a logout modal.

Create a footer component in a next.js project by building footer.tsx with next/link, exporting Footer, and rendering it in the app layout below the navbar to appear on all pages.

Develop the home page with a hero section and navigation to registration pages, including doctor registration, showcasing the special feature, how it works, medical specialties, and a call to action.

Create a patient registration page in a Next.js 16 app with auth/register and a page.ts file, submit name, email, and password to api/auth/register, and navigate to login on success.

Create a doctor registration page in Next.js 16 with a form for name, email, password, license number, and specialization, fetch specializations from an API, then navigate to login on success.

Implement a login api route in Next.js using Prisma to fetch the user by email, verify the password with bcrypt, create a session, and return a 200 login successful response.

Implements a login page in Next.js 16, handling email and password input, submitting to an API, and navigating to the home page on success while displaying errors.

Implement a Next.js 16 logout API route to clear cookies by deleting the user session, returning a 200 response with a logout successful message, and handling errors during logout.

Build a forgot password api route in a Next.js 16 app using prisma, generate and store a reset code with expiry, and send a password reset email via email service.

Create a forgot password page in a Next.js 16 app, with an email form wired to the forget password API, and display success or error messages based on user input.

Implement a reset password API route in Next.js 16, validate the reset code, hash the new password with bcrypt, update the user, delete the code, and send a confirmation email.

Build a reset password page in the auth area of a Next.js 16 project, extract code from URL and submit with the new password to API, then navigate to login.

Build a protected get all users API route in Next.js 16 using Prisma, guarded by session and admin check, returning users with related doctor and patient accounts, ordered by createdAt.

Implement a get user account route under /me using Prisma to fetch the authenticated user's details, including doctor and patient profiles, with proper error handling.

Implement a get user by id API route in Next.js by extracting the id from the URL, authenticating the session, and returning the user with related doctor and patient data.

Implement a Next.js 16 update password API with prisma user lookup, bcrypt password hashing, session checks, and email confirmation on success.

Implement a protected put endpoint to upload a profile picture, validate image size up to 10 mb, save to public/pictures/profile-pictures, delete the old image, and update the user's profile url.

Create a patient profile API in a Next.js 16 full-stack project by building get and update routes under /api/patient/me, enforce patient-only access, and use Prisma for data handling.

Build a get patient by id API route in a Next.js 16 project. Extract the id from the URL, query the patients table, and return the patient or not found.

Expose a blood group api route using Prisma enum values, returning blood groups for patient selection with a get request and robust error handling.

Create a genotype api route with a root.ts folder and adapt the blood group setup to genotype. Pass genotype down and implement genotype retrieval and error handling, then prepare pages.

Build a patient profile page in a Next.js 16 app by creating a profile UI, fetching user and patient data, and enabling profile picture uploads.

Update patient profile page in a Next.js 16 project fetches and edits patient data, loads blood group and genotype enums, and submits changes with back navigation.

Create a password update page in a Next.js 16 app with old, new, and confirm password fields, validate input, call the update password API, and log out after success.

Builds the appointment booking api with routes that validate doctor, patient, purpose, and date, generates a jitsi meeting link via uuid v4, checks conflicts, and saves in Prisma.

Implement an async send appointment confirmation method that retrieves patient and doctor data, formats the date time in a readable form, bundles consultation type and meeting link, and sends emails.

Develop a get appointments API that returns all appointments for a doctor or patient by validating the session, differentiating roles, querying the database, and handling not found errors.

Implement a Next.js api route to complete an appointment by id using a put request, validating the session and doctor ownership, and updating the Prisma appointment status to completed.

Implement a cancel appointment API in Next.js 16 with a put route that validates the user session, extracts the appointment id, updates status to cancelled, and triggers cancellation emails.

Create a get appointment by id API in a Next.js 16 project using a dynamic id route and Prisma to fetch appointment with doctor and patient data not found handling.

Build a book appointment page in Next.js 16, fetch and select doctors via API, validate and submit booking data, and navigate to the appointment list upon success.

Develop a patient appointments page in a Next.js 16 full-stack course, displaying all appointments with dates and color-coded status badges, plus options to cancel or view consultation notes via API.