Click any module to expand. This module teaches Next.js 15 with the App Router — not the legacy Pages Router. Server Components are the default, Server Actions replace API routes for mutations, and the entire architecture is full-stack React. Prerequisite: React fundamentals with TypeScript.
Project setup, file-based routing, layouts, and the paradigm shift from React SPA
React SPA: client-rendered, single HTML file, slow initial load, no SEO. Next.js: server-rendered (fast initial load, SEO-friendly), file-based routing (no react-router), built-in API routes, image/font optimisation. When to use Next.js (marketing sites, e-commerce, SaaS, blogs) vs React SPA (admin dashboards, internal tools). Next.js IS React — it adds capabilities, doesn't replace React knowledge.
npx create-next-app@latest --typescript --tailwind --eslint --app. App Router directory: app/ (routes), components/ (shared UI), lib/ (utilities, db), public/ (static assets). File conventions: page.tsx (route), layout.tsx (shared wrapper), loading.tsx (loading UI), error.tsx (error boundary), not-found.tsx (404). next.config.ts configuration. TypeScript strict mode by default.
app/page.tsx → /. app/about/page.tsx → /about. app/blog/[slug]/page.tsx → /blog/my-post (dynamic). app/shop/[...slug]/page.tsx → catch-all. Route groups: (marketing)/ and (dashboard)/ for different layouts without affecting URL. Parallel routes: @modal, @sidebar for rendering multiple pages simultaneously. Private folders: _components/ excluded from routing.
layout.tsx: persists across navigations (no re-mount). Root layout: html/body wrapper. Nested layouts: dashboard layout inside root layout. template.tsx: re-mounts on every navigation (for animations). loading.tsx: automatic Suspense boundary — shows loading UI while page data fetches. Instant navigation with pre-fetching: Link component prefetches routes on hover. The UX that feels like a native app.
error.tsx: automatic error boundary per route segment. 'use client' required (error boundaries are Client Components). Reset function to retry. Global error: app/global-error.tsx. not-found.tsx: custom 404 page. notFound() function: programmatic 404. Error recovery without full page reload. The architecture where errors are contained, not catastrophic.
Link component: client-side navigation (no full page reload), automatic prefetching. useRouter: programmatic navigation (push, replace, back). usePathname: current URL path. useSearchParams: query string access. redirect() for server-side redirects. permanentRedirect() for 301. Navigation that feels instant because of prefetching + streaming + caching.
The paradigm shift: components that run on the server by default
In App Router, every component is a Server Component by default. Server Components: run on the server, zero JavaScript sent to browser, can directly access databases/APIs/filesystem. No useState, no useEffect, no browser APIs — they don't run in the browser. async components: fetch data directly with await. Smaller bundle: server code never reaches the client. The biggest React paradigm shift since hooks.
'use client' directive at the top of a file makes it a Client Component. Client Components: run in the browser, CAN use hooks (useState, useEffect), CAN use browser APIs (window, document), CAN handle user interactions (onClick, onChange). When to use: forms, interactive UI, real-time features, animations. The rule: Server Component by default, Client Component only when you NEED interactivity.
The pattern: Server Component (fetches data) → passes data as props → Client Component (renders interactive UI). Server Components CAN render Client Components (as children). Client Components CANNOT import Server Components (but can accept them as children via React.ReactNode). The composition boundary: "fetch on server, interact on client." This pattern is how every production Next.js app is structured.
Server Component: fetching data, accessing backend resources, keeping secrets (API keys), reducing bundle size, SEO content. Client Component: event handlers (onClick), React hooks (useState, useEffect), browser APIs (localStorage), third-party client libraries (charts, maps, rich text editors). Common mistake: making everything 'use client' — defeats the purpose. Start server, add 'use client' only where needed.
How Next.js fetches data on the server and controls static vs dynamic rendering
Direct database queries: const products = await db.product.findMany(). Direct API calls: const data = await fetch('https://api.example.com/data'). No useEffect, no loading state management — the component IS the data fetcher. Parallel fetching: Promise.all([fetchUsers(), fetchProducts()]) to avoid waterfalls. Sequential fetching: when one query depends on another.
Static rendering (default): page rendered at BUILD time, served as HTML from CDN. Dynamic rendering: page rendered at REQUEST time. Next.js auto-detects: if you use cookies(), headers(), searchParams, or uncached fetch → dynamic. force-static and force-dynamic options. The performance hierarchy: static > ISR > SSR > CSR. Choosing the right strategy per page.
fetch() cache: by default, fetch responses are cached across requests. Revalidation: fetch('...', { next: { revalidate: 3600 } }) — refresh every hour. On-demand revalidation: revalidatePath('/products') and revalidateTag('products') — refresh after mutation. Router cache: client-side cache for visited routes (instant back/forward). Understanding Next.js caching is the most important (and most confusing) topic.
ISR: serve static pages, regenerate in the background after a time interval. revalidate: 60 → page is static for 60 seconds, then regenerated on next request. Stale-while-revalidate: user sees the cached version immediately while the new one generates. Best of both: static page speed + dynamic data freshness. Perfect for: product pages, blog posts, news — content that changes but not every second.
Streaming: send HTML to the browser as it's generated — don't wait for all data. loading.tsx triggers automatic Suspense boundaries. Manual Suspense: wrap slow components individually — rest of the page loads instantly. Streaming is why Next.js pages feel fast even with heavy data fetching. Skeleton loaders inside Suspense for progressive loading. The UX pattern that makes Next.js feel like a native app.
Full-stack data mutations without API routes — the new way to handle forms in Next.js
Server Actions: async functions that run on the server, callable from client-side forms. 'use server' directive. Define in a separate file: app/actions.ts. Call directly from form action={createProduct}. No API route needed — Next.js handles the request/response. Automatic serialisation. The simplest way to handle mutations in any React framework. Replaces POST /api/products endpoints for most use cases.
<form action={serverAction}> — the form submits to the server function directly. FormData: access form fields via formData.get('name'). Validation: validate on server with Zod before processing. Revalidation: revalidatePath('/products') after successful mutation. Progressive enhancement: forms work WITHOUT JavaScript (submit as regular POST). The pattern: form → Server Action → validate → mutate → revalidate → redirect.
useFormStatus: { pending, data, method, action } — show loading spinners during submission. useActionState (React 19): manage form state with prev state + Server Action. Optimistic updates with useOptimistic: update UI immediately, revert on error. Error handling: return { error: 'message' } from Server Action → display in form. The hooks that make Server Actions feel like real-time UIs.
app/api/products/route.ts: export async function GET(), POST(), PUT(), DELETE(). When to use Route Handlers instead of Server Actions: webhooks (Stripe, GitHub), third-party API consumption, public APIs for mobile apps, file downloads. NextRequest and NextResponse objects. Dynamic route handlers: [id]/route.ts. Route Handlers = the traditional API route — use when Server Actions don't fit.
middleware.ts at project root: runs BEFORE every request. Use cases: auth check (redirect unauthenticated to /login), geolocation-based redirects, A/B testing, rate limiting. matcher config: specify which routes middleware runs on. NextRequest cookies, headers access. Response: NextResponse.redirect(), NextResponse.rewrite(), NextResponse.next(). The gatekeeper that controls access to every page.
Full-stack database access and authentication — the backend inside Next.js
Prisma: type-safe database client. schema.prisma: define models (User, Post, Comment). prisma migrate dev for schema migrations. Prisma Client: fully typed queries with IDE autocomplete. Direct database queries in Server Components: const users = await prisma.user.findMany(). Relations: include, select for loading related data. PostgreSQL (Neon, Supabase) or MySQL (PlanetScale) as cloud database. The standard ORM for Next.js full-stack apps.
Drizzle: SQL-like ORM that's closer to raw SQL. TypeScript-first with zero code generation. Drizzle vs Prisma: Drizzle is lighter, faster cold starts (better for Edge), SQL-familiar syntax. Prisma is more ergonomic, better for complex relations, wider ecosystem. Students learn Prisma deeply, understand Drizzle as alternative. Choosing the right ORM matters for Edge vs Node runtime decisions.
Auth.js: the standard Next.js auth library. Providers: Google, GitHub, Credentials (email/password). Session management: JWT or database sessions. auth() function: get current session in Server Components. Middleware integration: protect routes globally. Role-based access: session.user.role. Custom sign-in/sign-out pages. Auth.js handles OAuth complexity, CSRF, session rotation, token refresh — the auth you don't have to build from scratch.
Middleware: redirect unauthenticated users to /login. auth() in Server Components: check session before rendering. Protected Server Actions: check auth before mutation. Role-based rendering: show admin controls only for admin users. signIn(), signOut() for Client Components. The complete auth architecture: middleware (gate) → Server Component (data) → Server Action (mutation) — all authenticated.
.env.local for development. NEXT_PUBLIC_ prefix: exposed to browser. Without prefix: server-only (safe for API keys, DB URLs). Vercel environment variables for production. Never commit .env to Git. process.env.DATABASE_URL in server code only. The security boundary: server-only secrets never reach the client bundle.
The built-in features that make Next.js the choice for production websites
export const metadata: Metadata = { title, description, openGraph, twitter }. Static metadata in layout.tsx/page.tsx. Dynamic metadata: export async function generateMetadata({ params }). Template titles: { template: '%s | MyApp' }. Open Graph images for social sharing. robots.txt and sitemap.xml generation. Structured data (JSON-LD). Why SSR + Metadata API = best-in-class SEO without effort.
Image component: automatic resize, WebP/AVIF format, lazy loading, blur placeholder. width/height required (prevents CLS). fill mode for responsive images. Priority prop for above-the-fold images (disable lazy loading). Remote image domains: images.remotePatterns config. The Image component alone improves Lighthouse performance by 20-30 points. Never use <img> in Next.js — always use next/image.
next/font/google: import Google Fonts at build time (no external requests). Self-hosted, GDPR-compliant, zero layout shift. Variable fonts: const inter = Inter({ subsets: ['latin'] }). Apply via className. Local fonts: next/font/local for custom fonts. Font optimisation eliminates CLS from font loading — automatic, zero-effort.
Automatic code splitting per route. Tree shaking: unused code removed. Prefetching: Link component preloads pages on viewport entry. Turbopack (dev): 10x faster than Webpack. Edge Runtime: run lightweight functions at CDN edge locations (faster for geographically distributed users). Partial Prerendering (experimental): static shell + dynamic content in one page. The performance stack that makes Next.js the fastest React framework.
Core Web Vitals: LCP, INP, CLS — Next.js optimises all three automatically (images, fonts, streaming). next/script for third-party scripts with loading strategies (defer, lazyOnload). Lighthouse CI in GitHub Actions: track performance on every PR. Built-in ESLint: next/core-web-vitals config. Accessibility: semantic HTML, focus management, aria attributes. useReportWebVitals hook for analytics.
Tailwind CSS, component patterns, testing strategies, and advanced App Router features
Tailwind CSS: first-class support in create-next-app. Server Component friendly (no CSS-in-JS runtime). shadcn/ui: accessible components installed into your project (not a dependency). Dark mode with next-themes. Responsive design. Animation with Framer Motion (Client Component). CSS Modules as alternative. Why CSS-in-JS libraries (styled-components, Emotion) don't work in Server Components — and what to use instead.
Parallel routes: @modal, @sidebar — render multiple route segments simultaneously in the same layout. Use case: modal that has its own URL (/photo/123 as a modal on the feed, full page on direct visit). Intercepting routes: (.)photo — intercept a route and show in current layout. Instagram-style photo modals: click to open modal, share URL shows full page. Advanced routing that only Next.js offers.
Unit testing: Vitest for utility functions and hooks. Component testing: React Testing Library for Client Components. Integration testing: test Server Components with next/jest config. E2E testing: Playwright for full user flows (navigate, fill forms, assert results). Testing Server Actions: mock database calls. Testing middleware: custom request mocks. The testing strategy for a framework that runs on both server and client.
[locale] dynamic segment for multi-language routes. next-intl or next-international for message management. Language detection middleware. Static generation for each locale. RTL support. Translation files: en.json, hi.json, fr.json. Dynamic locale switching. Why i18n matters: companies serving Indian market need English + Hindi at minimum. Global companies need many more.
React cache(): deduplicate database calls across components in a single request. unstable_cache: cache function results across requests with revalidation. Pagination with searchParams: /products?page=2&sort=price. Infinite scroll with Server Components + Client Component trigger. Optimistic UI: useOptimistic for instant feedback. Data mutation → revalidation → re-render — the complete data lifecycle.
Vercel deployment, self-hosting, CI/CD pipelines, and production readiness
Connect GitHub → automatic deploys on push. Preview deployments per PR (unique URL for each branch — review before merging). Production deployment on main branch. Custom domain + HTTPS (automatic). Environment variables in Vercel dashboard. Serverless functions: each Route Handler/Server Action deploys as a serverless function. Edge functions for middleware. Analytics dashboard. Vercel IS the deployment platform for Next.js — built by the same team.
next build → next start on any Node.js server. Docker: multi-stage Dockerfile (build → slim runtime). Docker Compose with PostgreSQL. Self-hosting on: AWS (EC2, ECS, App Runner), DigitalOcean, Railway. standalone output mode: minimal deployment bundle. When to self-host: data sovereignty requirements, existing infrastructure, cost control at scale. Vercel for convenience, self-host for control.
On push: lint (ESLint) → typecheck (tsc) → test (Vitest + Playwright) → build → deploy. Vercel GitHub integration: automatic CI/CD (Vercel builds and deploys on push — zero config). Self-hosted: GitHub Actions → Docker build → push to registry → deploy. Lighthouse CI: performance budget enforcement. Branch protection: PR must pass CI.
Security: environment variables, CSRF protection, input validation. Performance: analyse bundle (next/bundle-analyzer), optimise images, enable caching. SEO: metadata on every page, sitemap, robots.txt, Open Graph images. Monitoring: Vercel Analytics, Sentry for error tracking, logging. Database: connection pooling (Prisma Accelerate or PgBouncer), backups. "Is your app production-ready?" — this checklist ensures the answer is yes.
Product catalog (ISR), shopping cart (Zustand), checkout (Server Actions + Stripe), user auth (Auth.js), admin dashboard, image optimisation (next/image), search with filtering, SEO metadata per product.
MDX or rich text editor, categories/tags, comments (Server Actions), author profiles, SEO-optimised (dynamic metadata + Open Graph images), RSS feed, static generation for blog posts, i18n for English + Hindi.
Multi-tenant dashboard, user management (roles: admin/member), data visualisation (charts), file upload, billing integration, real-time updates, dark mode, responsive. The production SaaS template.
Trainers build Next.js features live — from npx create-next-app to deployed production app. Server Components, Server Actions, Prisma queries — all coded in real time.
Students build features on their project between sessions. Push to GitHub → auto-deploy to Vercel. Preview URLs for every branch — instant feedback.
Trainers review: Server vs Client Component choices, caching strategy, data fetching patterns, SEO metadata. The architectural decisions that make Next.js apps fast and maintainable.
Vercel deploys on every push from the first session. Students see their full-stack app live on the internet — with preview URLs for every PR.
React's official documentation (react.dev) recommends Next.js as the production framework for React. "Create React App" is deprecated. The React team collaborates directly with Vercel on Server Components. Next.js isn't a third-party framework — it's where React's future is being built. Learning Next.js is learning where React is going.
Flipkart, Swiggy, CRED, Razorpay — Indian product companies are migrating to Next.js for performance and SEO. Globally: Netflix, TikTok, Hulu, Nike, Washington Post. Job postings mentioning "Next.js" have grown 300%+ since 2023. For students entering the job market in 2025–26, Next.js is increasingly expected, not optional.
Next.js eliminates the frontend-backend split: Server Components query databases directly, Server Actions handle mutations, Route Handlers serve APIs. One codebase, one deployment, one team. Students who know Next.js can build complete applications alone — the most productive developer profile for startups and small teams.
A deployed Next.js project on Vercel with Server Components, Prisma, Auth.js, SEO metadata, and a custom domain demonstrates full-stack React mastery that few candidates possess. It's the strongest frontend portfolio piece — faster, SEO-friendly, and architecturally superior to React SPA projects. The project that makes interviewers say "this person knows modern React."
E-305, Industrial Area, Sahibzada Ajit Singh Nagar, Punjab 160055, IN
