Next.js: Full-Stack React Applications
Master Next.js from routing and server components to API routes, authentication, and deployment. Build a full-stack e-commerce application with real-time features, secure auth, and production-grade architecture.
Course Content
6 modules · 30 lessonsNext.js Foundations and Project Setup
Students can scaffold a Next.js project, understand the App Router structure, and run a working dev environment.
What is Next.js and how does it differ from Create React App
Next.js overview, CRA vs Next.js, SSR vs CSR, hybrid rendering, file-based routing, full-stack capability
How to scaffold a Next.js project with create-next-app
create-next-app CLI, project structure, app directory, layout.tsx, page.tsx, tsconfig, package.json scripts
How file-based routing works in the Next.js App Router
App Router conventions, page.tsx, layout.tsx, nested routes, route segments, colocation, special files
Server Components vs Client Components in Next.js
React Server Components, Client Components, use client directive, when to use each, serialization, interactivity boundary
How to fetch data in Next.js Server Components
async Server Components, fetch API extensions, request memoization, revalidation, static vs dynamic data fetching, cache options
Routing, Navigation, and Dynamic Segments
Students can build nested routes, dynamic segments, catch-all routes, and implement client-side navigation with Link and useRouter.
How to create dynamic route segments in Next.js App Router
dynamic segments, bracket syntax, params prop, generateStaticParams, catch-all routes, optional catch-all, slug patterns
How to navigate between pages using the Next.js Link component
Link component, href prop, prefetching, replace vs push, scroll behavior, active link styling, programmatic navigation
What are route groups and parallel routes in Next.js
route groups, parentheses syntax, parallel routes, slots, intercepting routes, layout isolation, authentication layouts
How to read search params and handle 404s in Next.js
searchParams prop, URLSearchParams, notFound function, not-found.tsx, redirect function, permanentRedirect
How middleware works in Next.js and when to use it
middleware.ts, NextResponse, request inspection, redirects in middleware, route matching with matcher, auth guards, edge runtime
API Routes and Server Actions
Students can build REST API endpoints, handle form submissions with Server Actions, and implement mutations without writing client-side fetch code.
How to create API routes in the Next.js App Router
Route Handlers, route.ts, GET POST PUT DELETE handlers, NextRequest, NextResponse, HTTP methods, JSON responses
What are Server Actions and how do they replace API routes for mutations
Server Actions, use server directive, form actions, server-side mutations, revalidatePath, revalidateTag, action prop on form
How to handle form state and errors with useActionState in Next.js
useActionState hook, pending state, validation errors, optimistic updates, useOptimistic, form feedback, progressive enhancement
How to validate and sanitize data in Next.js Server Actions
Zod validation, schema parsing, safeParse, error handling in actions, type-safe FormData, input sanitization patterns
How to structure Next.js API routes for REST endpoints
REST conventions in App Router, dynamic route handlers, CORS headers, error handling patterns, HTTP status codes, route handler middleware patterns
Database Integration with Prisma
Students can connect a PostgreSQL database, define schemas with Prisma, and perform full CRUD operations in Next.js Server Components and Actions.
How to set up Prisma with Next.js and PostgreSQL
Prisma installation, prisma init, DATABASE_URL, schema.prisma, provider configuration, prisma generate, PrismaClient singleton, env files
How to define models and relations in a Prisma schema
model definition, field types, @id, @default, @relation, one-to-many, many-to-many, optional fields, enums, @@index
How to perform CRUD operations with Prisma in Next.js
findMany, findUnique, create, update, delete, where, select, include, orderBy, take, skip, upsert
How to implement pagination with Prisma and Next.js
offset pagination, cursor-based pagination, take and skip, cursor and after, total count, page params, Prisma transaction for count
How to handle database errors and transactions in Prisma
Prisma error types, PrismaClientKnownRequestError, error codes, unique constraint handling, transactions, interactive transactions, rollback
Authentication with NextAuth.js
Students can implement full authentication flows with NextAuth.js including OAuth, credentials, session management, and route protection.
How to set up NextAuth.js v5 in a Next.js App Router project
Auth.js v5, auth() function, providers, AUTH_SECRET, session strategy, route handler setup, auth.config.ts pattern
How to add OAuth providers to NextAuth.js (GitHub, Google)
OAuth flow, provider configuration, GitHub provider, Google provider, callback URLs, OAuth app setup, environment variables, user profile mapping
How to implement credentials authentication with NextAuth.js
Credentials provider, authorize callback, bcrypt password hashing, database user lookup, JWT strategy, credential validation
How to access session data in Next.js Server and Client Components
auth() function in Server Components, useSession hook, SessionProvider, session object shape, user ID in session, callbacks for custom session data
How to protect routes with NextAuth.js middleware
middleware with auth, authorized callback, protected route patterns, role-based access, redirecting unauthenticated users, matcher config
Performance, Optimization, and Deployment
Students can optimize images, fonts, and metadata, apply caching strategies, and deploy a production Next.js application to Vercel.
How to optimize images in Next.js with the Image component
next/image component, automatic WebP conversion, lazy loading, sizes prop, priority prop, remote images, blurDataURL, layout shift prevention
How to optimize fonts in Next.js with next/font
next/font/google, next/font/local, font variables, zero layout shift, self-hosting, font-display swap, applying to Tailwind
How to add metadata and Open Graph tags in Next.js
Metadata API, static metadata export, generateMetadata function, Open Graph, Twitter cards, canonical URLs, dynamic metadata, template strings
How Next.js caching works and how to control it
Request Memoization, Data Cache, Full Route Cache, Router Cache, revalidate, cache tags, unstable_noStore, force-dynamic, caching layers overview
How to deploy a Next.js application to Vercel
Vercel deployment, environment variables on Vercel, build output, production vs preview deployments, vercel.json, serverless functions, edge functions, deployment checklist