Building Advanced Web Applications with React and Next.js
Contact us to book this course
Web and Mobile Applications
On-Site, Virtual
3 days
This course builds upon foundational React knowledge to explore advanced techniques and the powerful features available when using React with Next.js. Participants will learn how to build Server-Side Rendered (SSR), Incremental Static Regeneration (ISR), and Static Site Generated (SSG) applications, optimize performance, implement advanced routing strategies, manage API routes, and deploy production-ready Next.js/React applications. The course emphasizes best practices for building scalable, performant, and maintainable React applications using the Next.js framework.
Learning Objectives
At the end of this course, participants will know how to:
- Set up and configure a Next.js project using TypeScript
- Understand and implement React Server Components and Server-Side Rendering (SSR), Static Site Generation (SSG), and Incremental Static Regeneration (ISR)
- Use Next.js routing features, including dynamic routes and nested layouts
- Create and consume API routes within a Next.js application
- Implement data fetching strategies for different rendering scenarios
- Optimize application performance by utilizing techniques such as code splitting, image optimization, and caching
- Manage application state effectively on both client and server
- Deploy Next.js/React applications to production environments
- Implement authentication and authorization
- Utilize Next.js features such as middleware and rewrites
Who Should Attend
This course is designed for web developers who have a solid understanding of React and want to learn how to build advanced React applications using Next.js.
Suggested Prerequisites
Attendees should have a strong understanding of React, including components, props, state, hooks, and JSX. Familiarity with basic JavaScript concepts, including asynchronous programming and promises, is also helpful. Experience with basic command-line operations is helpful
Course outline
- What Is Next.js and Why Use It?
- Key Features: SSR, SSG, ISR, API Routes, Routing
- Project Structure and File Conventions
- Debugging on Client and Server
- Setting Up a Next.js project
- Development Workflow and Tooling
- Image Optimization with next/image
- How and Why to Use TypeScript
- Creating Pages and Navigating Between Them
- Dynamic Routes and Route Parameters
- Nested Layouts and Shared Components
- Client-side Navigation with Link
- Programmatic Navigation with useRouter
- Migrating from getServerSideProps and getStaticProps
- fetch and Other Data Fetching Libraries
- Debouncing User Input
- Choosing the Right Data Fetching Strategy
- Client-side Data Fetching with useSWR or React Query
- Connecting to Databases or External APIs
- Suspense and UI Streaming
- User Input and searchParams
- Implementing Authentication Strategies (JWT, OAuth)
- Protecting Routes and API Endpoints
- Handling User Sessions
- Middleware for Route Protection and Request Modification
- Data Validation with Zod
- The useActionState Hook
- Confirm Dialogs with CreatePortal
- Higher-Order Components and Children
- Creating Custom Hooks
- Client and Server State Management
- Client-Side State Management Options
- State Persistence and Hydration
- Redux, ReduxProvider and Saga
- Client State Persistence with indexedDb
- Interacting with Client-Side Data in Client-Side Components
- Creating API Endpoints within Next.js
- Handling HTTP Requests (GET, POST, PUT, DELETE)
- Working with Request and Response Objects
- Middleware for API Routes, Throttling/Rate Limiting
- Next.js Configuration Options
- Rewrites and Redirects
- Improving Core Web Vitals
- Optimizing Component Rendering with Incremental Static Regeneration (ISR)
- Generating Dynamic Routes at Build Time with generateStaticParams
- Code Splitting and Dynamic Imports
- Caching Strategies
- Building for Production with Webpack
- Analyzing Bundles with bundle-analyzer
- Lighthouse for Measuring Performance and Search Engine Optimization
- Environment Variables and Secrets Management
- Deploying Containerized Solutions
- Continuous Integration and Deployment (CI/CD)
