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

This program provides comprehensive coverage of React 19+ and Next.js 16+, starting from core React concepts and progressing to advanced Next.js features. Participants will learn the latest features including React Compiler, Actions, new hooks like useActionState and useOptimistic, Turbopack, and Partial Prerendering. The program covers building modern, performant web applications using industry best practices. The program assumes basic JavaScript knowledge but no prior React or Next.js experience. Teaching style is based on demo code and extensive hands-on exercises.

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 concept
    • React ecosystem overview
  • Setting up Development Environment
    • Node.js and npm/yarn
    • VS Code setup and extensions
  • 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
  • Hooks in Depth
    • useContext hook
    • useReducer hook
    • useRef hook
    • useMemo and useCallback
    • Custom hooks
    • Rules of hooks
    • use() hook for promises and context
    • useActionState for form actions
    • useOptimistic for optimistic updates
    • useFormStatus for form state
    • useTransition improvements
  • Context API
    • Creating context
    • Context as provider
    • useContext usage
    • Context best practices
React Patterns
  • Actions and Forms
    • Form actions overview
    • Server actions integration
    • Action pending states
    • Optimistic updates with useOptimistic
    • Error handling in actions
  • Component Patterns
    • Higher-Order Components (HOC)
    • Render props
    • Compound components
    • Controlled vs Uncontrolled components
  • Refs and DOM
    • Creating refs
    • Accessing DOM elements
    • ref as a prop
    • forwardRef
    • useImperativeHandle
Performance and Optimization
  • Performance Optimization
    • React Compiler (automatic optimization)
    • React.memo
    • useMemo and useCallback
    • Code splitting with React.lazy
    • 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
Next.js Setup and Routing
  • Introduction to Next.js
    • What is Next.js and benefits
    • SSR vs SSG vs CSR vs PPR
    • Next.js 16+ features overview
    • Turbopack as default bundler
  • Getting Started
    • Installation and setup
    • Project structure
    • App Router architecture
    • Turbopack improvements
  • 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
    • Understanding server components
    • Client components with 'use client'
    • 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
    • Form handling with server actions
    • Progressive enhancement
    • useActionState integration
    • Optimistic updates with useOptimistic
    • Action composition
  • After API
    • Post-response tasks
    • Analytics and logging
    • Cleanup operations
    • Use cases and patterns
  • Middleware
    • Middleware basics
    • Authentication middleware
    • Redirects and rewrites
    • Headers and cookies
    • Edge runtime
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 component
    • Image optimization
    • Responsive images
    • Static assets
    • Font optimization with next/font
    • Lazy loading strategies
  • 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 and lazy loading
    • Bundle analysis
    • Streaming and Suspense
    • Partial prerendering (PPR)
    • React Compiler integration
    • Build performance improvements
Intro to Authentication and Database
  • Authentication Overview
    • Client vs Server Auth
    • NextAuth.js Introduction
    • Protected Routes
  • Database Integration Overview
    • connecting to DB
Deployment and Production
  • Building for Production
    • Production build
    • Environment variables
    • Build optimization
  • Deployment Platforms
    • Vercel deployment
    • Alternative platforms
    • Custom server 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 or yarn
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

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.