Web Development · WDC-70

Next.js Advanced

Next.js Advanced is a course in building large web applications with Next.js 16 and the App Router, covering advanced routing, Server Actions with optimistic UI, sign-in and permissions with Better Auth, state management, Cache Components, testing and Docker deployment. It suits web and full-stack developers who already know the Next.js basics.

Updated 8 Oct 2026

From 8,550 THB / person 9,500 −10% excl. VAT 7% · group rates available

Corporate training quote Join the waiting list

PDFDownload the course outline

Duration18 hours · 3 days
FormatOnsite / live online
Next roundOn request
CertificateIncluded

Course overview

Next.js is one of the React frameworks that web teams choose most often for real production systems. Version 16 changed a great deal: Proxy replaces Middleware, Turbopack is the default, and Cache Components make caching opt-in with use cache, which the Next.js team has recommended for every app since 16.4. Developers used to the older approach need to rethink how they fetch data, cache it and split work between server and client.

This course builds on Next.js fundamentals and takes learners to the level needed for large systems. It starts with project structure and advanced routing, handles forms and data with Server Actions, Zod and optimistic UI, adds sign-in and role-based permissions with Better Auth, and connects a database through an ORM. Learners then build server-side data tables, put URL state and global state in the right places, speed pages up with Cache Components, and write tests and deploy with Docker and GitHub Actions. It closes with a workshop that builds a complete dashboard system. (3 days, 6 hours per day, 18 hours in total, Advanced level.)

What you’ll gain

Design the structure of large projects and use parallel routes, intercepting routes and route groups
Separate server and client components correctly and write Proxy logic
Handle forms and data changes with Server Actions, useActionState, Zod and useOptimistic
Build secure sign-in and role-based access control (RBAC) with Better Auth
Put URL state and global state in the right places with nuqs and Zustand
Use Cache Components, use cache, cacheTag and updateTag to speed up pages
Write unit and end-to-end tests with Vitest and Playwright
Deploy with Docker in standalone mode and set up CI/CD with GitHub Actions

Who this course is for

Web developers who already use Next.js and want to grow into senior or tech lead roles
Full-stack developers who want deeper expertise in current React and Next.js
Teams maintaining older Next.js apps who want to adopt the Next.js 16 approach
Learners who have completed the Basic Next.js for Beginners course

Prerequisites

A working knowledge of the Next.js App Router, such as the file structure, pages, layouts and Link
React with hooks such as useState, useEffect and useTransition
Basic TypeScript and Tailwind CSS
The basics of HTTP, APIs and SQL databases
A laptop that can run Node.js 24 LTS, Docker Desktop and VS Code, plus your own GitHub account

Curriculum

Course Details

This course is the 2026 edition of Next.js Advanced, updated for Next.js 16.4 and React 19.3. It runs for 3 days, 6 hours per day (18 hours in total, 09:00-16:00), as lectures with labs on a single dashboard project that grows throughout the course. Advanced level, following on from Basic Next.js for Beginners. It uses Cache Components, which the Next.js team now recommends for every app, and Proxy in place of Middleware. The sign-in examples have moved from Auth.js to Better Auth, with notes on the differences for teams already on Auth.js, and new topics cover server and client components, a data layer with an ORM, and CI/CD with GitHub Actions. Learners take home a lab guide, source code for every lab and deployment files.

Day 1 Architecture, Routing and Server Actions

Section 1: Lab: Project Structure for Large Systems

What changed in Next.js 16: Turbopack by default, Proxy and Cache Components
Feature-based versus type-based folders, and private folders
Strict TypeScript settings, path aliases, ESLint and Prettier
Typed routes and handling environment variables safely
Lab: create the starter dashboard project with create-next-app

Section 2: Advanced Routing

Route groups and multiple layouts for different roles, such as admin and user
Parallel routes (@folder) showing several independently loaded panels on one page
Intercepting routes for modals that have their own URL and open as a full page on refresh
loading, error, not-found and streaming with Suspense
Lab: a gallery that opens images in a modal, and a multi-panel dashboard

Section 3: Server Components, Client Components and Proxy

The use client boundary and passing props between server and client
Fetching data in server components and keeping server code out of the client
Proxy (proxy.ts, which replaces middleware.ts): redirects, rewrites and headers
Route handlers for webhooks and external APIs
Lab: a Proxy that checks a cookie and sends signed-out users to the login page

Section 4: Lab: Server Actions and Forms

Server Actions in depth: passing arguments with bind and checking permissions every time
useActionState for form state and errors returned from the server
Zod 4 validation with one schema shared by client and server
useFormStatus and pending states for buttons
Lab: create and edit forms that show errors field by field

Section 5: Optimistic UI and User Experience

useOptimistic for instant feedback that rolls back on error
useTransition for work that should not block the screen
Reporting Server Action results with toasts and handling errors consistently
View Transitions in React 19.3 for smooth page changes
Lab: an optimistic like button and to-do list

Day 2 Authentication, Data and State

Section 6: Lab: A Data Layer with an ORM

Run PostgreSQL with Docker and design the schema
Drizzle ORM or Prisma: schema, migrations and seed data
A separate data access layer, with server-only to block client imports
Transactions and avoiding N+1 queries
Lab: the dashboard data layer used for the rest of the course

Section 7: Lab: Authentication with Better Auth

An overview of sign-in options for Next.js and why this course uses Better Auth
Install Better Auth, connect the database and add the /api/auth route handler
Email and password sign-in, and OAuth with Google or GitHub
Reading the session in server components, Server Actions and on the client
Lab: working sign-up, sign-in and sign-out pages

Section 8: Authorisation and Role-Based Access Control

Define roles and permissions with the Better Auth admin plugin
Protect routes, components and Server Actions by permission
Always check permissions close to the data, not only in Proxy
What differs for teams already using Auth.js, and how to migrate
Lab: an admin area that only authorised users can open

Section 9: Lab: Server-Side Data Tables with shadcn/ui

Set up shadcn/ui with Tailwind CSS 4, theming and dark mode
Data tables with paging, sorting and filtering done on the server
Reusable components built from shadcn/ui primitives
Forms in dialogs that work with Server Actions
Lab: user and order management pages with search and filters

Section 10: URL State and Global State

Why not useState for everything: separating server, URL and client state
nuqs for type-safe filters, search and page numbers in the URL
Zustand for UI state such as the sidebar and complex settings
Avoiding duplicated data between the server and a client store
Lab: a table whose filters can be shared as a link

Day 3 Performance, Testing and Deployment

Section 11: Lab: Cache Components

Enable cacheComponents and understand the opt-in caching model
use cache, cacheLife and cacheTag at function and component level
updateTag and revalidateTag to clear specific cache entries after data changes
A static shell with dynamic content in Suspense, and use cache: private
Lab: a dashboard that loads fast while personal data stays correct

Section 12: Performance and Core Web Vitals

Measure LCP, INP and CLS and read Lighthouse results
next/image, next/font and loading third-party scripts
Link prefetching and deferring work that is not needed yet
Bundle size analysis and an introduction to the React Compiler
Lab: improve the Core Web Vitals of the home page

Section 13: Lab: Testing

Unit tests with Vitest for utilities, schemas and Server Actions
Component tests with Testing Library
End-to-end tests with Playwright that simulate sign-in and real use
Concepts of error tracking and logging in production
Lab: a test suite for the forms and admin pages

Section 14: Lab: Deployment with Docker and CI/CD

Environment variables for development, staging and production
Standalone output and a multi-stage Dockerfile
Run the app alongside PostgreSQL with Docker Compose
GitHub Actions to lint, test, build and create images automatically
Hosting options: your own server or a managed platform

Section 15: Workshop: A Complete Dashboard System

Brief: an order management system with users in several roles
Design the routes, data layer and permissions, then build them with the approaches covered
Add caching, tests and a pipeline so the app is ready to deploy
Present the result, use an AI assistant to help write code with careful review, and plan next steps

Schedule & training options

For individuals — public rounds

No public rounds are open right now. Join the waiting list and we will contact you first when the next round opens, or ask us on LINE. Or call 02-570-8449 or 088-807-9770

Join the waiting list Ask about rounds

For organisations — in-house / private

Tailor the content to your team’s tools and projects
Your dates, at your office or live online
Quotation with tax ID for procurement

Corporate training quote

Instructors

Samit KoyomFounder & CEO, IT Genius Engineering

Frequently asked questions

What are Server Actions in Next.js, and what are they used for?

Server Actions are functions marked with use server that run on the server but can be called from forms or buttons on the client without writing a separate API. They suit creating, updating and deleting data, work with useActionState to show form state and errors, and pair well with Zod for validation. The key rule is to check the user's permissions in every action, because an action can be called from outside just like any other endpoint.

What is optimistic UI, and how do you build it in Next.js?

Optimistic UI shows the result on screen straight away, assuming the save will succeed, and then confirms or rolls back when the server replies. It makes an app feel fast, for example a like count that goes up the moment you click. In Next.js you use React's useOptimistic hook together with Server Actions. If the action fails, the screen returns to the real value, and you should tell the user what happened in plain language.

How do Cache Components and use cache work in Next.js 16?

Once cacheComponents is enabled in next.config, caching becomes opt-in. Functions or components marked with use cache are cached, their lifetime is set with cacheLife and they are labelled with cacheTag, so when data changes you clear only that part with updateTag or revalidateTag. Anything that must be fresh on every request, such as data for the signed-in user, is wrapped in Suspense and streamed in. Since Next.js 16.4 the Next.js team recommends this model for every app.

Who is the Next.js Advanced course for, and what should I know beforehand?

It suits web and full-stack developers who already use Next.js and want to grow into senior or tech lead roles, teams maintaining older Next.js apps, and learners who have finished Basic Next.js. You should understand the App Router, React hooks, basic TypeScript and Tailwind CSS, and the basics of HTTP, APIs and SQL databases.

What will I be able to do after the Next.js Advanced course?

You will be able to structure large Next.js 16 projects, use advanced routing and Proxy, handle forms with Server Actions, Zod and optimistic UI, add sign-in and permissions with Better Auth, put state in the right places, speed pages up with Cache Components, write tests with Vitest and Playwright, and deploy with Docker and GitHub Actions. Participants who complete the training receive a Certificate of Completion with its own number, which can be verified online.

Can the Next.js Advanced course be run in-house for our team?

Yes. It can be run in-house for your team, with examples adapted to your own work, such as the project structure, sign-in system or database your team already uses, or a focus on moving an older Next.js app to version 16. You can request a quotation from this page, or contact us on LINE @itgenius or by phone on 02-570-8449.