Next.js 14 - Advanced

• Strong understanding of JavaScript and ES6+
• Experience with React and React Hooks
• Basic familiarity with Next.js
• Understanding of API calls and state management

Audience

• Experienced React developers looking to deepen their knowledge of Next.js
• Front-end and full-stack developers seeking advanced performance optimization techniques
• Software engineers working on large-scale Next.js applications

Next.js is a powerful React framework for building high-performance web applications.

This instructor-led, live training (online or onsite) is aimed at advanced-level developers who wish to master the latest features in Next.js 14, optimize performance, and implement modern React techniques.

By the end of this training, participants will be able to:

• Implement advanced React hooks and concurrent features.
• Understand and utilize Next.js routing strategies effectively.
• Leverage Server Components, Server Actions, and hybrid rendering approaches.
• Optimize data fetching, caching, and incremental static regeneration.
• Use Next.js as a backend solution with Edge Functions and Edge Runtime.
• Manage state using React Context, Redux, and atomic state libraries.
• Optimize application performance for Web Core Vitals.
• Test, monitor, and deploy Next.js applications efficiently.

Format of the Course

• Interactive lecture and discussion.
• Lots of exercises and practice.
• Hands-on implementation in a live-lab environment.

Course Customization Options

• To request a customized training for this course, please contact us to arrange.

Introduction

Modern React

• What's new in React 18 and 19
• Modern tools and changes in approach

React Advanced Hooks

• useMemo, useCallback, useDispatch, useRef, useImperativeHandle

Concurrent Mode in React

• Usage of useTransition, useDeferredValue hooks

Next.js Routing

• Differences between App Router and Pages Router

Rendering Strategies in Next.js

• Server Side Rendering vs Single Page Application vs Static Generation

Server Components and Server Actions

• Usage of ‘use server’ and ‘use client’ directives

Data Fetching and Caching

• Incremental Static Regeneration strategy

Using Next.js as a Backend

• Edge Functions and Edge Runtime

State Management

• React Context, Redux, and atomic state management (Zustand)

Creating Templates in Next.js

• Reusable templates
• Available CSS approaches and template libraries

Performance Optimization

• Improving load time and achieving high Web Core Vitals scores

Instrumentation

Testing in Next.js

Monorepo Strategies

• Next.js with TurboRepo / Nx

Monitoring, Deployment, and Orchestration

Summary and Next Steps