My Skill Lab
Programming & Web DevelopmentIntermediate

Next.js Full-Stack Development

App Router, server components, server actions, auth and deployment.

Taught by Sagar Khadka · Full-Stack Developer

What you'll learn

  • Structure a Next.js 16 App Router project with layouts, dynamic routes, loading and error states
  • Decide where the Server Component and Client Component boundary belongs and explain why
  • Fetch, stream and cache data using async components, Suspense and the use cache directive
  • Model a PostgreSQL schema in Prisma, run migrations and query it from server code
  • Build validated forms with Server Actions, useActionState and path revalidation
  • Protect pages with sessions and a data access layer, then deploy to Vercel or Docker

About this course

This Next.js full-stack course is for React developers who want to build complete web applications with one framework and one codebase. You will learn the App Router from the ground up: file-based routing, layouts, dynamic routes, React Server Components and Client Components, data fetching with streaming and Suspense, and caching with the use cache directive in Next.js 16. You will connect a PostgreSQL database through Prisma ORM, handle forms and mutations with Server Actions validated by Zod, add session-based authentication with a proper data access layer and proxy.ts, and deploy to Vercel or to your own server with Docker. Every lesson builds towards a small publishing app written in TypeScript. You should be comfortable with modern JavaScript and React basics such as components, props, state and hooks before starting. No prior backend or Next.js experience is required.

Course content

7 lessons
  1. 1How Next.js Works and Your First App Router ProjectWhat Next.js adds to React, how to scaffold a project, and how layouts and pages fit together.Preview
  2. 2Routing, Dynamic Segments and Special FilesNested routes, dynamic segments with async params, route groups, and loading, error and not-found files.
  3. 3Server Components and Client ComponentsWhere code runs, how to draw the client boundary, and composition patterns that keep bundles small.
  4. 4Data Fetching, Streaming and CachingFetch in async components, stream slow parts with Suspense, and cache results with the use cache directive.
  5. 5A Real Database with Prisma and PostgreSQLModel data in schema.prisma, run migrations, and query PostgreSQL safely from server code.
  6. 6Server Actions, Forms and MutationsWrite validated Server Actions, connect them to forms with useActionState, and refresh stale data.
  7. 7Authentication, Protected Routes and DeploymentVerify sessions in a data access layer, guard routes with proxy.ts, and ship to Vercel or Docker.