Next JS with Gen AI

You can write modern asynchronous JavaScript and build core component hierarchies in React.

1. Modern JavaScript (ES6+): let/const, arrow functions, destructuring and modules90 min
   • let and const scope
   • arrow functions and lexical this
   • array and object destructuring
   • ESM import and export syntax
2. Promises, async/await and the event loop90 min
   • event loop microtasks vs macrotasks
   • Promise constructor and chaining
   • async/await syntax
   • try/catch error handling in asynchronous flows
3. The React mental model: components, JSX and the virtual DOM120 min
   • JSX transformation
   • functional component structure
   • virtual DOM reconciliation
   • React element trees
4. Props, state and one-way data flow120 min
   • passing props between components
   • component state encapsulation
   • one-way data binding rules
   • lifting state up
5. Setting up your Next.js development environment and tooling120 min
   • Node.js runtime installation
   • npm and pnpm package managers
   • Next.js CLI project scaffolding
   • TypeScript configuration basics
6. Debugging runtime errors and handling strict mode90 min
   • browser developer tools debugging
   • React strict mode double-rendering
   • reading unhandled promise rejections
   • source maps and stack traces

Hands-on project: Build an interactive task tracker using ES6 modules, arrow functions, and custom React state hooks with local storage persistence and automated unit tests.

You can manage complex component lifecycles, performance optimisations, and shared state across a React application.

1. Functional components and the core hooks (useState, useEffect)120 min
   • useState updater functions
   • useEffect dependency arrays
   • cleanup functions in effects
   • avoiding infinite render loops
2. useRef, useMemo and useCallback — and when each matters120 min
   • useRef for DOM element access
   • mutable ref storage
   • useMemo reference caching
   • useCallback function stability
3. Writing custom hooks to reuse logic120 min
   • extraction patterns for custom hooks
   • encapsulating side effects
   • returning state and dispatchers
   • reusable data-fetching hooks
4. The Context API for shared state120 min
   • createContext setup
   • useContext consumption
   • provider pattern design
   • avoiding context re-render traps
5. Lists, keys, controlled forms and events120 min
   • stable key assignment in lists
   • controlled vs uncontrolled inputs
   • synthetic event handling
   • form submission prevention
6. Advanced component composition and render props90 min
   • compound component pattern
   • children prop flexibility
   • slot-based component design
   • avoiding prop drilling

Hands-on project: Build a multi-step checkout form with custom validation hooks, context-based cart state, and memoized rendering checks.

You can structure production-grade Next.js applications using the App Router, layouts, and route groups.

1. Pages, layouts and nested routing with the App Router150 min
   • app directory conventions
   • layout.tsx and page.tsx hierarchy
   • nested layout propagation
   • template.tsx lifecycle
2. Server Components vs Client Components explained150 min
   • default React Server Components (RSC)
   • use client directive boundary
   • passing props across the server-client boundary
   • serialization rules
3. File-based routing, dynamic routes and route groups150 min
   • bracket syntax for dynamic segments [id]
   • catch-all and optional catch-all routes
   • route groups using parentheses (group)
   • private folders
4. Navigation, Link and the useRouter hook150 min
   • next/link prefetching behavior
   • programmatic navigation with useRouter
   • active link styling patterns
   • scroll restoration configuration
5. The Metadata API and a project structure that scales150 min
   • static and dynamic metadata objects
   • opengraph-image generation
   • robots.txt and sitemap.xml route handlers
   • feature-based folder organisation
6. Intercepting and parallel routes for modals and drawers120 min
   • parallel routes with @folder convention
   • intercepting routes with (.) syntax
   • default.tsx fallback handling
   • modal state preservation on page reload

Hands-on project: Build a corporate documentation site featuring nested layouts, dynamic route segments, and custom metadata tags.

You can implement server-side data fetching, caching strategies, and streaming loading states for high-performance pages.

1. Static, dynamic and streaming rendering120 min
   • Static Rendering (SSG)
   • Dynamic Rendering (SSR)
   • React Suspense streaming SSR
   • Partial Prerendering (PPR) concepts
2. Server-side data fetching inside Server Components120 min
   • async/await in Server Components
   • native fetch API extensions
   • handling authorization headers on the server
   • error handling during data fetch
3. The fetch cache, revalidation and cache tags120 min
   • cache: force-cache vs no-store
   • time-based revalidation (next: { revalidate })
   • on-demand revalidation with revalidateTag
   • revalidatePath usage
4. Loading UI, Suspense and error boundaries120 min
   • loading.tsx skeleton screens
   • React Suspense fallback integration
   • error.tsx error boundaries
   • global-error.tsx implementation
5. Parallel vs sequential data loading patterns120 min
   • sequential waterfall request anti-patterns
   • Promise.all parallel fetching
   • independent suspense boundaries
   • streaming slower data components
6. Handling request timeouts and fallback responses90 min
   • AbortController timeout configuration
   • graceful degradation on external API failure
   • fallback skeleton states under slow networks
   • logging request latency metrics

Hands-on project: Build a real-time analytics dashboard with suspense boundaries, parallel data fetching, and revalidation cache tags.

You can execute secure data mutations and handle forms with progressive enhancement and optimistic UI updates.

1. Server Actions for mutations without separate APIs120 min
   • use server directive
   • invoking server functions from client components
   • formData handling
   • action security and closures
2. Progressive enhancement and robust form handling120 min
   • forms working without JavaScript enabled
   • useFormStatus hook for pending states
   • useFormState for response handling
   • native HTML constraint validation
3. Optimistic updates with useOptimistic120 min
   • immediate UI feedback patterns
   • useOptimistic hook setup
   • reverting state on server error
   • concurrent transition management
4. Validation, error states and user feedback120 min
   • Zod schema validation on the server
   • returning structured validation errors
   • toast notification integration
   • accessible error announcement
5. Revalidating data cleanly after a mutation120 min
   • invalidating router cache after mutation
   • revalidatePath vs revalidateTag selection
   • redirecting after successful action
   • optimizing client cache invalidation
6. CSRF protection and security in Server Actions90 min
   • encrypted closure arguments security
   • origin header validation checks
   • preventing unauthorized server action execution
   • rate limiting mutation endpoints

Hands-on project: Build an issue tracking board where users can create, edit, and move cards with optimistic state updates and server validation.

You can connect Next.js apps to relational and document databases with Prisma and secure them using Auth.js.

1. Route handlers and building REST endpoints150 min
   • route.ts file conventions
   • GET, POST, PUT, DELETE method handlers
   • NextRequest and NextResponse objects
   • handling query parameters and headers
2. Connecting a database with Prisma (PostgreSQL) or MongoDB150 min
   • schema.prisma configuration
   • running prisma migrate dev
   • Prisma Client generation
   • connection pooling in serverless environments
3. Data modelling, queries and relations150 min
   • defining one-to-many and many-to-many relations
   • prisma include and select queries
   • transaction management with prisma.$transaction
   • handling database indexing
4. Authentication and sessions with Auth.js (NextAuth)150 min
   • Auth.js configuration setup
   • Credentials and OAuth (GitHub/Google) providers
   • JWT vs database session strategies
   • auth() helper in Server Components
5. Protecting routes and role-based access control150 min
   • middleware.ts matcher configuration
   • redirecting unauthenticated users
   • role-based component rendering
   • protecting Server Actions from unauthorized callers
6. Database connection pooling and edge runtime limitations120 min
   • serverless connection exhaustion issues
   • using Prisma Accelerate or PgBouncer
   • edge vs Node.js runtime database drivers
   • handling migration locks in CI/CD

Hands-on project: Build a user-authenticated SaaS workspace portal backed by PostgreSQL, Prisma ORM, and role-based route protection.

You can integrate Large Language Models securely, configure API parameters, and apply core prompt engineering principles.

1. How large language models work: tokens, context and temperature120 min
   • tokenization and token limits
   • context window capacity
   • temperature and top-p sampling control
   • deterministic vs stochastic outputs
2. The AI provider landscape and choosing a model120 min
   • OpenAI API vs Anthropic Claude vs open-source models
   • cost per token trade-offs
   • latency considerations
   • API client SDK installation
3. Calling an LLM securely from the server120 min
   • keeping API keys out of client bundles
   • server-side environment variable configuration
   • handling API rate limit headers
   • error handling for upstream LLM failures
4. Prompt engineering fundamentals120 min
   • role assignment and system instructions
   • few-shot prompting examples
   • delimiting input data securely
   • mitigating prompt injection risks
5. Rate limits, cost control and safety basics120 min
   • implementing token usage tracking
   • rate limiting user requests with Redis or Postgres
   • content moderation API flags
   • managing fallback providers
6. Evaluating prompt quality and iteration workflows90 min
   • golden test dataset creation
   • measuring output variance across runs
   • system prompt version control
   • logging prompt parameters for audit

Hands-on project: Build an AI prompt playground app that compares responses across different temperature and system prompt settings.

You can build streaming chat interfaces, tool calling routines, and structured JSON generation using the Vercel AI SDK.

1. Streaming AI responses to the UI with the Vercel AI SDK150 min
   • ai package installation
   • streamText API in route handlers
   • useChat hook in client components
   • handling real-time chunk rendering
2. Building a chat interface with message history150 min
   • managing message state arrays
   • persisting chat history to PostgreSQL
   • auto-scrolling chat containers
   • handling loading and typing indicators
3. Tool / function calling from the model150 min
   • defining tools with Zod schemas
   • passing tools to generateText and streamText
   • executing local functions on tool calls
   • returning tool execution results to the LLM
4. Structured (JSON) output you can trust150 min
   • generateObject function configuration
   • enforcing schema conformity with Zod
   • handling parsing failures gracefully
   • type-safe AI feature integration
5. Errors, retries and graceful loading states150 min
   • handling network disconnections during stream
   • automatic retry logic for LLM timeouts
   • fallback UI when AI service is degraded
   • aborting ongoing generations
6. Multi-modal inputs: processing images and audio in chat120 min
   • accepting image uploads in chat UI
   • passing base64 image data to vision models
   • audio transcription integration with Whisper
   • handling multi-modal token consumption

Hands-on project: Build an AI assistant app featuring chat history, markdown rendering, tool execution for live weather data, and strict JSON output.

You can implement vector search, document chunking, and RAG pipelines to ground LLM responses in proprietary data.

1. Why RAG: grounding models in your own data150 min
   • limitations of parametric model knowledge
   • hallucination reduction via context injection
   • architecture of a RAG pipeline
   • retrieval vs fine-tuning trade-offs
2. Embeddings and vector databases150 min
   • text-embedding-3 model integration
   • vector dimensionality and cosine similarity
   • Pinecone index setup and configuration
   • storing vectors with metadata
3. Chunking, indexing and retrieval strategies150 min
   • document text splitting and overlap strategies
   • batch embedding generation
   • top-k nearest neighbor queries
   • hybrid keyword and vector search
4. Building a “chat with your documents” feature150 min
   • file upload and text extraction pipeline
   • injecting retrieved context into system prompts
   • citing source documents in chat responses
   • managing context window limits with retrieved chunks
5. Improving relevance and reducing hallucination150 min
   • reranking search results
   • query rewriting for better vector matching
   • evaluating RAG response accuracy
   • handling out-of-domain queries
6. Hybrid search and vector database maintenance120 min
   • combining BM25 lexical search with vector similarity
   • managing index updates when source documents change
   • handling metadata filtering in vector queries
   • optimizing vector dimension size and storage costs

Hands-on project: Build a 'chat with your PDFs' document repository app using Pinecone vector storage and semantic similarity retrieval.

You can style responsive interfaces with Tailwind CSS and optimize Next.js assets for top Core Web Vitals scores.

1. Styling with Tailwind CSS and component libraries120 min
   • Tailwind CSS utility-first configuration
   • responsive design breakpoints
   • shadcn/ui and Radix primitive integration
   • dark mode implementation
2. Image, font and asset optimisation in Next.js120 min
   • next/image component configuration
   • automatic WebP/AVIF conversion and sizing
   • next/font self-hosting optimization
   • preventing Cumulative Layout Shift (CLS)
3. Core Web Vitals and performance tuning120 min
   • Largest Contentful Paint (LCP) optimization
   • Interaction to Next Paint (INP) reduction
   • React bundle size analysis
   • dynamic imports with next/dynamic
4. Accessibility essentials120 min
   • ARIA roles and semantic HTML
   • keyboard navigation in AI chat widgets
   • screen reader announcements for streaming text
   • color contrast compliance
5. SEO and metadata for AI-powered pages120 min
   • dynamic Open Graph tags for shared AI chats
   • structured JSON-LD schema markup
   • canonical URL configuration
   • search indexing strategies for dynamic apps
6. Client-side state management vs server cache optimization90 min
   • minimizing client bundle size with server components
   • avoiding redundant client-side data fetching
   • memoizing expensive rendering calculations
   • profiling React render performance

Hands-on project: Audit and optimize an AI application's performance profile, achieving a 90+ Lighthouse score across all Core Web Vitals metrics.

You can test Next.js applications, manage production secrets, and deploy scalable apps to Vercel and edge runtimes.

1. Environment variables and secrets management120 min
   • public NEXT_PUBLIC_ vs private env variables
   • runtime vs build-time environment variables
   • Vercel secrets management
   • validating env variables with Zod at startup
2. Testing components, route handlers and Server Actions120 min
   • Vitest and React Testing Library setup
   • mocking fetch and API responses
   • testing Server Actions in isolation
   • End-to-End testing basics with Playwright
3. Deploying to Vercel and the edge runtime120 min
   • Vercel project linking and Git integration
   • Edge runtime vs Node.js runtime trade-offs
   • configuring custom domains and SSL
   • preview deployments on pull requests
4. Monitoring, logging and analytics120 min
   • structured error logging in production
   • Vercel Analytics and Web Vitals monitoring
   • tracking AI token usage and latency metrics
   • setting up uptime and error alerts
5. CI/CD and production best practices120 min
   • GitHub Actions workflow for automated tests
   • linting and type-checking in CI pipelines
   • database migration deployment strategies
   • zero-downtime deployment practices
6. Rollback strategies and incident response90 min
   • instant rollbacks on Vercel deployments
   • database schema backward compatibility
   • monitoring error rates after a release
   • debugging production server logs

Hands-on project: Configure a GitHub Actions CI pipeline running unit tests and automated deployments to a production Vercel environment.

You can explain exactly why a Next.js page is slow or stale, and fix it deliberately.

1. The Next.js caching layers90 min
   • Full route cache
   • Data cache and fetch options
   • Router cache on the client
2. Choosing a rendering strategy90 min
   • Static vs ISR vs dynamic
   • revalidate and revalidateTag
   • Streaming with Suspense
3. Core Web Vitals in practice90 min
   • LCP and the critical path
   • CLS from layout shift
   • Bundle analysis
4. Seeing it in production90 min
   • Server-side tracing
   • Instrumentation hooks
   • Cache hit-rate monitoring
5. Debugging cache invalidation race conditions90 min
   • identifying stale client router cache
   • debugging revalidateTag propagation delays
   • handling distributed cache invalidation
   • testing cache behavior in local development
6. Network payload optimization and compression90 min
   • optimizing JSON payload sizes from server components
   • Gzip and Brotli compression headers
   • minimizing server-to-database round trips
   • efficient streaming data serialization

Hands-on project: Audit the capstone app's caching: choose static, ISR or dynamic per route with the reason recorded, implement on-demand revalidation after a mutation, cut the largest Core Web Vital regression, and add server-side tracing for the AI route.

You can architect, build, test, and deploy a complete production-grade full-stack AI application from scratch.

1. Scoping and designing your capstone150 min
   • defining product requirements and user stories
   • database schema design
   • API contract definition
   • UI/UX wireframing
2. Building the full-stack foundation150 min
   • setting up Next.js project repository
   • configuring Tailwind CSS and UI components
   • implementing database models with Prisma
   • setting up Auth.js authentication flow
3. Adding chat and RAG over real data150 min
   • integrating Vercel AI SDK chat interface
   • implementing document upload and vector embedding pipeline
   • connecting vector search to LLM prompt context
   • adding tool calling capabilities
4. Polishing, testing and deploying to production150 min
   • writing end-to-end tests for core user journeys
   • optimizing performance and Core Web Vitals
   • deploying application to Vercel production environment
   • verifying environment variables and database connections
5. Portfolio, GitHub and interview preparation150 min
   • structuring a professional GitHub README
   • preparing technical talking points for system architecture
   • common Next.js and AI engineering interview questions
   • portfolio review and career positioning
6. Capstone live code review and architecture defense120 min
   • presenting system architecture decisions
   • defending trade-off choices under code review
   • handling edge cases and failure modes in QA
   • final polish and production handover

Hands-on project: Build and deploy a fully functional AI-powered knowledge management SaaS platform with authentication, database persistence, RAG document search, streaming chat, and Vercel edge deployment.