Liam O.
Sample Server and client finally clicked
The tree mental model in the first lesson cleared up months of confusion about use client. Everything after built on it nicely.
Next.js 16 App Router: ship a full stack web app
Server Components, Server Actions, PostgreSQL with Drizzle, authentication, caching and deployment in one real project
Created by Amara Okafor
- Updated October 2026
- English
- Intermediate
What you will learn
- Decide which components should run on the server and which on the client
- Structure routes with layouts, loading states, error boundaries and dynamic segments
- Write Server Actions that validate input and update a PostgreSQL database
- Model and migrate a schema with Drizzle ORM
- Protect pages and actions with authentication checks
- Control caching and revalidation so users see fresh data
- Deploy a Next.js app and configure environment variables safely
Course content
Foundations of the App Router
Data with PostgreSQL and Drizzle
- Article: Running PostgreSQL locally 9 min
- Video: Defining the schema with Drizzle 14 min
- Video: Migrations you can trust 11 min
- Video: Querying from server components 13 min
Mutations with Server Actions
- Video: Your first Server Action 12 min
- Video: Validating input on the server 12 min
- Video: Pending states and optimistic UI 10 min
- Video: Revalidating after changes 11 min
Authentication and authorisation
- Article: Choosing an auth approach 8 min
- Video: Sign in, sign out and sessions 14 min
- Video: Protecting pages and actions 12 min
- Video: Request interception with proxy 9 min
Caching and performance
- Video: How caching works in the App Router 13 min
- Video: Cache Components and use cache 12 min
- Video: Images, fonts and Core Web Vitals 10 min
Shipping Shelf
- Video: Route handlers for a public API 10 min
- Video: Testing the critical paths 13 min
- Video: Deploying to production 12 min
- Article: Coming from the Pages Router 7 min
- Quiz: Final check 5 min
Requirements
- Working knowledge of React components, props, state and hooks
- Basic TypeScript
- Node.js 20 or newer and Docker or a hosted PostgreSQL database
Description
Next.js with the App Router lets you write the server and the client of a web app in one React codebase. That is powerful, and also confusing at first: which code runs where, what gets cached, and when does a component need "use client"? This course answers those questions by building one complete app.
The project
We build Shelf, a reading list app where users sign in, save books, write short notes and share public lists. It has real persistence in PostgreSQL, authentication, forms that work before JavaScript loads, image optimisation and SEO friendly public pages.
What you will learn
- How Server Components and Client Components divide the work
- Layouts, loading and error boundaries with the file based router
- Mutations with Server Actions and form validation on the server
- PostgreSQL access with Drizzle ORM and migrations
- Authentication and protecting routes
- Caching, revalidation and how to reason about fresh data
- Deploying to a managed platform or your own Node server
Every concept is introduced when the app needs it. You will see the network panel often, because watching what the server actually sends is the fastest way to understand the App Router.
Before you start
You should be comfortable with React components, props, state and hooks, and know basic TypeScript. You do not need prior Next.js experience. If you have used the older Pages Router, there is a short lesson mapping old concepts to new ones.
Who this course is for
- React developers ready to build full stack apps
- Pages Router users moving to the App Router
- Back end developers who want one codebase for UI and server logic
Instructor
Amara Okafor
Full stack JavaScript developer teaching React, Next.js and Node through real projects
- 4.5 instructor rating
- 22 reviews
- 9,044 students
- 3 courses
- Sample
I build web applications for small product teams, mostly with React, Next.js, Node.js and PostgreSQL. Most of my week goes into the unglamorous parts: data fetching, forms, auth, error states and deployments that do not break on a Friday.
My courses follow one project from an empty folder to a deployed app. I explain why a pattern exists before I show it, and I leave my mistakes in when they teach something useful.
Outside client work I mentor junior developers and review a lot of pull requests, which is where most of my lesson ideas come from.
Student reviews
Elif Y.
Sample Auth section is very honest
I liked that Amara showed why checking the session in a layout is not enough. We had exactly that bug in production.
Rania A.
Sample Forms that work without JavaScript
Seeing a form submit before hydration was a small revelation. The validation pattern with useActionState is now standard on my team.
Chris D.
Sample Great project, caching is still hard
The caching lessons are the best I have seen, but it is a complex topic and I needed to rewatch them twice.
Ben W.
Sample Assumes solid React knowledge
The course is good but moves quickly if your React is rusty. I paused to review hooks first and then it was fine.
Sana M.
Sample Drizzle plus Server Actions is lovely
The data layer setup is clean and typed end to end. I copied the structure into my own side project.
Tobias K.
Sample Practical deployment advice
Covering both a managed platform and self hosting was useful. A Docker compose file in the repo would have been nice.
Keep exploring
All Web Development courses
More in Web Development
$79.99
Enroll now