Complete React with Next.js

Course Category: Software Development
Course Duration: 5 Days
Hours: 21 Contact Hours

Select your country

Select your country to access the registration page

Singapore

Register Now

Duration: 5 Day
Timing: 9 AM to 5 PM Singapore Time

Malaysia

Register Now

Duration: 5 Day
Timing: 9 AM to 5 PM Malaysia Time

Philippines

Register Now

Duration: 5 Day
Timing: 9 AM to 5 PM Philippine Time

Australia

Register Now

Duration: 5 Day
Timing: 11 AM to 7 PM AEST

All Other Locations

Register Now

Duration: 5 Day
Timing: 9 AM to 5 PM Philippines/Singapore/Hong Kong Time

Course Objectives

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.

Prerequisites

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

Audience

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

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+

Course Coverage

1. 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

2. Components and Props

  • Components
    • Functional components
    • Class components Overview
    • Component composition
  • Props
    • Passing props
    • Prop types
    • Children props
    • Destructuring props

3. 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

4. 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

5. 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

6. 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

7. 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

8. 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

9. 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

10. 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

11. Intro to Authentication

  • Authentication Overview
    • Client vs Server Auth
    • NextAuth.js Introduction
    • Protected Routes

12. 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