Full-Stack Web Application with Next.js 16 and Prisma

Course Details

A live online hands-on workshop via Zoom, 5 days, 6 hours per day (30 hours in total), with lecture and practice throughout. Learners build the same continuous project across all five days. The content is based on Next.js 16.3 and Prisma ORM 7.9, the latest stable versions as of August 2026. Prior React and TypeScript experience is expected.

Day 1: Next.js 16 Fundamentals, App Router and React Server Components

Section 1: Getting to Know Next.js and the Version 16 Overview

• What Next.js is, the problems it solves for React developers, and the difference between CSR, SSR, SSG, ISR and Streaming SSR
• The evolution from Pages Router to App Router and key changes in v16: Turbopack by default, Cache Components, proxy.ts, async Request APIs
• System requirements and what was removed in Next.js 16 (AMP, next lint, serverRuntimeConfig, sync params) and the impact on existing projects

Section 2: Creating a Project and Understanding Its Structure

• Creating a project with create-next-app, the standard directory structure, and configuring TypeScript, path aliases and ESLint Flat Config
• Turbopack and its speed difference, and using Next.js DevTools
• Workshop: create the nextjs-training project used throughout the course

Section 3: App Router Routing

• File-system routing and special files page.tsx, layout.tsx, template.tsx, with nested and dynamic routes
• params and searchParams are now Promises in Next.js 16 (must await), plus route groups and private folders
• Parallel Routes, Intercepting Routes and navigation with Link, useRouter, redirect() and notFound()

Section 4: React Server Components and Client Components

• The RSC concept and why it changes how you think; Server Components by default and their bundle-size and security benefits
• When to use use client, the component boundary, and passing a Server Component as children into a Client Component
• Key limitations and using server-only and client-only to prevent code leaking to the wrong side

Section 5: Loading, Error, Streaming and Metadata

• loading.tsx, Suspense for component-level streaming, and error.tsx, global-error.tsx, not-found.tsx
• Static and dynamic Metadata API for SEO, plus font and image handling with next/font and next/image
• Workshop: build the page structure with layouts, loading, error and metadata at every level

Day 2: Data Fetching, Route Handlers, Server Actions and First Steps with Prisma + PostgreSQL

Section 6: Data Fetching in the App Router

• Fetching in Server Components with async/await and the behavior of fetch in v16 with its changed caching defaults
• Request memoization with React.cache() and sequential vs parallel data fetching
• Client-side fetching when needed and choosing SWR or TanStack Query

Section 7: Route Handlers - Building a REST API in Next.js

• The route.ts file and exporting by HTTP method, plus NextRequest and NextResponse
• Reading query strings, path params (now Promises), request body, headers, cookies and Route Segment Config
• Node.js vs Edge runtime, streaming responses and correct practices

Section 8: Server Actions and Writing Data

• The Server Actions concept and use server, using them with forms via progressive enhancement, plus useActionState, useFormStatus, useOptimistic
• Revalidation with revalidatePath and revalidateTag
• Security: a Server Action is a public endpoint and must check permissions internally every time, and when to use a Server Action vs a Route Handler

Section 9: Getting to Know Prisma ORM 7 and Its Major Changes

• The parts of Prisma and what changed in Prisma 7: dropping the Rust engine for a WebAssembly query compiler
• The new prisma-client generator and the now-mandatory driver adapter (you can no longer call new PrismaClient() alone)
• The prisma.config.ts file, moving url out of schema.prisma, and new requirements Node.js 20.19+, TypeScript 5.4+

Section 10: Installing PostgreSQL and Connecting Prisma for the First Time

• Preparing PostgreSQL 17 with Docker Compose, installing Prisma and @prisma/adapter-pg, and configuring prisma.config.ts correctly
• The singleton PrismaClient pattern for Next.js and the postinstall: prisma generate setup
• Workshop: connect the project to PostgreSQL, create the first table and build a full CRUD API with Route Handlers and Server Actions

Day 3: Deep Prisma - Schema Design, Migration, Query, Transaction and MariaDB Comparison

Section 11: Designing a Schema with Prisma Schema Language

• The multi-file schema.prisma structure, scalar types and common attributes (@id, @unique, @default, @@index)
• Default functions autoincrement(), uuid(7), cuid(2), ulid(), noting that uuid()/cuid() run only on the client side
• PostgreSQL native types (@db.Uuid, @db.JsonB, @db.Timestamptz) and designing indexes for query patterns

Section 12: Relations Between Tables

• One-to-one, one-to-many, many-to-many (implicit and explicit join tables) and self-relations
• onDelete and onUpdate (Cascade, Restrict, SetNull), composite keys and relationMode (foreignKeys vs prisma)
• Workshop: design a complete example schema (User, Role, Product, Category, Order, OrderItem, Payment)

Section 13: Prisma Migrate Across the Development Lifecycle

• The difference between migrate dev, migrate deploy, db push and the shadow database
• Handling drift (migrate status, resolve, diff), baselining and seed data with prisma db seed
• Common error codes (P3005, P3006, P3009, P3014, P3018) and safe production migration practices

Section 14: Deep Prisma Client Queries

• Full CRUD and batch operations, advanced filtering (AND, OR, NOT, in, contains, mode: insensitive)
• Loading relations (include, select, nested write), pagination (offset vs cursor) and aggregation (count, groupBy, _sum)
• JSON fields, full-text search, raw queries ($queryRaw, $executeRaw), preventing SQL injection and TypedSQL (Preview)

Section 15: Transactions, Performance and the Connection Pool

• Sequential vs interactive transactions, the maxWait, timeout and isolation level options, and handling write conflicts (P2034)
• The N+1 problem in Prisma and how to detect it, relationLoadStrategy (Preview) and enabling query logging to see the real SQL
• The connection pool in Prisma 7 (set at the driver adapter), PgBouncer/Supavisor, and Prisma Client Extensions replacing $use

Section 16: MariaDB with Prisma - Real Usage and Caveats

• MariaDB uses the same mysql provider as MySQL, installing @prisma/adapter-mariadb, and a type-mapping comparison with PostgreSQL
• Features unavailable on MariaDB (scalar list, multiSchema, mode: insensitive, createManyAndReturn) and its advantages (full-text index)
• Key caveats: open Prisma 7 issues with MariaDB around JSON, migration drift, timezone and collation, plus a workshop moving the schema to MariaDB

Day 4: Production-Grade API - Validation, Security, Authentication, RBAC and Testing

Section 17: Systematic Validation and Error Handling

• Using Zod to validate input in both Route Handlers and Server Actions, with a schema shared between the client form and the server
• Designing a standard API response shape and handling Prisma errors (P2002, P2003, P2025)
• A centralized error handler, logging, and instrumentation.ts with onRequestError

Section 18: Data Access Layer and Data Security

• The Data Access Layer (DAL) concept, separating business logic from routes, and DTOs to control what data is sent out
• Using server-only to prevent secret leaks and handling environment variables safely
• Common vulnerabilities and how to prevent them: Mass Assignment, IDOR and over-exposure of data

Section 19: Authentication with Better Auth

• An overview of session- and token-based authentication, installing and configuring Better Auth and connecting the Prisma adapter
• Email & password, social providers (Google, GitHub), the nextCookies() plugin and reading sessions with auth.api.getSession()
• Configuring secure cookies, rate limiting and common plugins (2FA, Passkey, Magic Link)

Section 20: Authorization and Role-Based Access Control (RBAC)

• Designing role and permission schemas with Prisma and the Better Auth Access Control API
• proxy.ts replacing middleware.ts in Next.js 16 and route protection (runs on the Node.js runtime only)
• Workshop: add login and 3-tier RBAC (Admin, Staff, Customer) to the example system

Section 21: File Upload and Background Work

• Receiving file uploads via Server Actions and Route Handlers, validating type/size and storing metadata in the database
• Storage approaches: local storage, S3-compatible storage and presigned URLs
• Using after() for background work after the response, and approaches to background jobs and scheduled tasks

Section 22: Testing - Vitest and Playwright

• A testing strategy (the testing pyramid), configuring Vitest with Next.js, unit tests and component tests with Testing Library
• Integration tests for APIs hitting a real database, using a test database and mocking the Prisma Client (and when not to)
• E2E testing with Playwright, managing authentication state and running tests automatically in CI

Day 5: Caching, Performance, Deployment, CI/CD and the Capstone Project

Section 23: The Next.js 16 Caching System and Cache Components

• An overview of the caching layers and Cache Components (cacheComponents: true), the Dynamic by Default concept and the use cache directive
• use cache: private/remote, setting lifetime with cacheLife, tagging with cacheTag and invalidation with revalidateTag, updateTag, refresh
• The limitations inside use cache and patterns for reducing database load by caching Prisma query results

Section 24: Partial Prerendering and Performance Optimization

• The Partial Prerendering (PPR) concept, partial prefetching and instant navigations in v16.3
• Bundle-size analysis, dynamic import, code splitting, image optimization and the React Compiler
• Measuring with Core Web Vitals and Lighthouse and tuning the database side with EXPLAIN and indexes

Section 25: Self-hosted Deployment with Docker

• output: standalone and a multi-stage Dockerfile, and handling environment variables so one image serves multiple environments
• Running prisma migrate deploy safely, a full Docker Compose stack (Next.js + PostgreSQL + reverse proxy) and Nginx
• Multi-instance deployment, a custom cache handler with Redis and an overview of the Adapter API and Vercel

Section 26: CI/CD and Post-Deployment Operations

• Designing a pipeline with GitHub Actions: lint, type check, test, build, deploy, and handling migrations in the pipeline
• Managing secrets, health checks, graceful shutdown, and monitoring and logging at production level
• Planning Next.js and Prisma version upgrades systematically with codemods

Section 27: Capstone Project

• Brief: build a complete Product & Order Management system - from schema design and migration to a REST API with validation
• Build the UI with Server Components and Server Actions, add authentication and RBAC at every layer, and add caching with use cache
• Write unit, integration and E2E tests, create a Dockerfile, deploy to a test environment, then present and review the code together

Section 28: Summary and Next Steps

• A summary of the architecture across the five days and a pre-production checklist
• Where to go next: Monorepo (Turborepo), tRPC, GraphQL, microservices, and on the database side read replicas, sharding and Redis
• Keeping up with changes in Next.js and Prisma, plus Q&A and project-specific guidance