Complete React with Next.js
5 Days
reactnextjsjavascripttypescriptfrontendbackend
developmentframework
Intermediate
developer

This program provides a comprehensive, hands-on journey from core React 19+ fundamentals to advanced production patterns in Next.js 16+.

Key Highlights:

  • New React Features: Learn about React Compiler, Actions, and new hooks like useActionState and useOptimistic.
  • Advanced Next.js Architecture: Implement streaming, Partial Prerendering (PPR), and leverage Turbopack for rapid development.
  • Practical & Hands-On: Built entirely around live code demonstrations and extensive hands-on exercises that mirror real-world scenarios.

The program assumes basic JavaScript knowledge but no prior React or Next.js experience, making it ideal for developers transitioning to modern web development.

Audience

Program is primarily for developers who want to master React and Next.js for building modern web applications.

Prerequisites

Participant should have intermediate level knowledge of JavaScript/TypeScript, HTML, and CSS. Familiarity with ES6+ features (arrow functions, destructuring, modules) is recommended.

Topics

React Introduction
  • Introduction
    • What is React
    • Why use it
    • Virtual DOM
    • React ecosystem
  • Setup
    • Node.js and npm
    • IDE Setup
  • JSX
    • JSX syntax and rules
    • Expressions in JSX
    • JSX vs HTML differences
    • Conditional rendering
    • Lists and keys
Components and Props
  • Components
    • Functional components
    • Class components Overview
    • Component composition
  • Props
    • Passing props
    • Prop types
    • Children props
    • Destructuring props
State and Interactivity
  • State Management
    • useState hook
    • State updates and immutability
    • Lifting state up
    • State vs Props
  • Event Handling
    • Synthetic events
    • Event handlers
    • Passing arguments to handlers
    • Form handling
  • Side Effects
    • useEffect hook
    • Cleanup functions
    • Dependency arrays
    • Common use cases
Hooks and Context
  • Other Hooks
    • useReducer
    • useRef
    • useMemo
    • useCallback
    • Custom hooks
    • Rules of hooks
    • use() hook
    • useActionState
    • useOptimistic
    • useFormStatus
    • useTransition
  • Context API
    • Creating context
    • Context as provider
    • useContext
React Patterns
  • Actions and Forms
    • Form actions overview
    • Server actions integration
    • Action pending states
    • Optimistic updates
    • Error handling
  • Component Patterns
    • Higher Order Components
    • Render props
    • Compound components
    • Controlled vs Uncontrolled
  • Refs and DOM
    • Creating refs
    • Accessing DOM elements
    • ref as a prop
    • forwardRef
    • useImperativeHandle
Performance and SEO
  • Performance Optimization
    • React Compiler
    • React.memo
    • React.cache
    • useMemo
    • useCallback
    • Code splitting
    • Suspense
    • Profiler
  • Document Metadata
    • title element
    • meta tags
    • link tags
    • Benefits over manual approach
  • Error Handling
    • Error boundaries
    • Try-catch in event handlers
    • Error reporting
    • Improved error messages
  • Transition API
    • useTransition hook
    • isPending state
    • startTransition function
    • Error handling with useTransition
Next.js Introduction
  • Introduction
    • What is Next.js
    • Benefits
    • SSR vs SSG vs CSR vs PPR
    • Next.js 16+ features
    • Turbopack
  • Setup
    • Installation and setup
    • Project structure
    • App Router architecture
  • App Router
    • File-based routing
    • Layouts and templates
    • Pages and nested routes
    • Loading UI and streaming
    • Error handling
    • Not found pages
  • Advanced Routing
    • Parallel routes
    • Intercepting routes
    • Route groups
  • Dynamic Routes
    • Dynamic segments
    • Catch-all segments
    • Optional catch-all
    • generateStaticParams
    • Dynamic metadata
Data Fetching and Rendering
  • Server and Client Components
    • Server components
    • Client components
    • When to use each
    • Component composition patterns
  • Data Fetching
    • Server-side data fetching
    • fetch with caching
    • Revalidation strategies
    • Loading states
    • Error states
    • Parallel data fetching
    • Sequential data fetching
    • Streaming with Suspense
  • Partial Prerendering (PPR)
    • Understanding PPR
    • Static and dynamic parts
    • Configuration and usage
    • Benefits and use cases
Server Actions and Backend
  • API Routes and Server Actions
    • Route handlers
    • Request and response
    • Server actions
    • useActionState
    • Optimistic updates
  • After API
    • Post-response tasks
    • Analytics and logging
    • Cleanup operations
    • Use cases and patterns
  • Proxy
    • Proxy routes
    • Redirects
    • Authentication proxy
    • Headers and cookies
    • Error handling
Optimization and SEO
  • Caching Strategies
    • Request memoization
    • Data Cache
    • Full Route Cache
    • Router Cache
    • Cache revalidation
    • unstable_cache API
    • Cache tag management
  • Styling in Next.js
    • CSS Modules
    • Tailwind CSS integration
    • CSS-in-JS solutions
    • Global styles
    • Font optimization
  • Image and Asset Optimization
    • next/image
    • Image optimization
    • Responsive images
    • Static assets
    • Font optimization
    • Lazy loading
  • Metadata and SEO
    • Metadata API
    • Static metadata
    • Dynamic metadata
    • Open Graph and Twitter cards
    • JSON-LD for structured data
    • Sitemap generation
    • robots.txt
  • Performance Optimization
    • Turbopack benefits
    • Code splitting
    • Lazy loading
    • Bundle analysis
    • Streaming and Suspense
    • Partial prerendering (PPR)
    • React Compiler integration
    • Build performance improvements
Intro to Authentication
  • Authentication Overview
    • Client vs Server Auth
    • NextAuth.js Introduction
    • Protected Routes
Deployment and Production
  • Building for Production
    • Production build
    • Environment variables
    • Build optimization
  • Deployment Platforms
    • Vercel
    • Alternative
    • Custom deployment
  • Monitoring and Analytics
    • Error tracking
    • Performance monitoring
    • Analytics integration
  • Best Practices
    • Project structure
    • Code organization
    • Performance tips
    • Security considerations
    • Accessibility

Exclusions

Advanced backend development/deployment, GraphQL, advanced DevOps topics

Anything not mentioned in Topics

Software Requirements

Visual Studio Code or Antigravity IDE
Or any other IDE supporting React and Next.js
Node.js (v20 or later) with npm
React 19+
Next.js 16+

Internet Requirements

Good unrestricted internet connection is required.

Hardware Requirements

Laptop capable to run MS Office
Or Modern Developer Laptop

Classroom Requirements

Projector with HDMI, White Board, Markers with Eraser

Extra HDMI monitor

Online Requirements

Appropriate meeting software e.g. Zoom, MS Teams Please make sure that camera, speaker and mic are working

If you have any query, please contact now.