Next.js Fundamentals Training

Start building modern React applications with this comprehensive 2-day introduction to Next.js. Learn the core concepts of file-based routing, the App Router, pages, layouts, and React Server Components that form the foundation of every Next.js application.

Training Details


Duration	2 days (16 hours)
Level	Beginner
Delivery	In-person, Live online, Hybrid
Certification	N/A

Who Is This For?

React developers adopting Next.js for the first time
Frontend engineers moving to full-stack development
Teams migrating from Create React App or Vite to Next.js
Backend developers learning modern frontend frameworks
Technical leads evaluating Next.js for new projects

Learning Outcomes

After completing this training, you’ll be able to:

Create and structure Next.js applications with the App Router
Implement file-based routing with dynamic and nested routes
Build reusable layouts, templates, and loading states
Understand the difference between Server and Client Components
Fetch and display data using server-side patterns
Style applications with CSS Modules, Tailwind CSS, and component libraries

Detailed Agenda

Day 1: Next.js Core Concepts

Module 1: Getting Started with Next.js

What is Next.js and why use it
Project scaffolding with create-next-app
Project structure and configuration
Hands-on: Create your first Next.js application

Module 2: File-Based Routing

Pages and the App Router directory structure
Dynamic routes and route parameters
Nested routes and route groups
Hands-on: Build a multi-page application with dynamic routes

Module 3: Layouts and Templates

Root layouts and nested layouts
Shared UI across routes
Templates vs layouts
Hands-on: Create a dashboard layout with sidebar navigation

Day 2: Components and Data

Module 4: React Server Components

Server Components vs Client Components
The “use client” directive
Component composition patterns
Hands-on: Refactor components using server/client boundaries

Module 5: Data Fetching Basics

Fetching data in Server Components
Loading and error states
Suspense boundaries
Hands-on: Build a data-driven page with loading states

Module 6: Styling and Assets

CSS Modules and global styles
Tailwind CSS integration
Image optimization with next/image
Font optimization with next/font
Hands-on: Style a complete application with responsive design

Prerequisites

Solid JavaScript and ES6+ knowledge (arrow functions, destructuring, async/await)
Basic React experience (components, props, state, hooks)
Familiarity with npm or yarn package managers
No prior Next.js experience required

Delivery Formats

Format	Description
In-Person	On-site at your company’s location, hands-on with direct interaction
Live Online	Interactive virtual sessions with screen sharing and real-time labs
Hybrid	Combination of on-site and remote sessions, flexible scheduling

All formats include hands-on labs, course materials, starter projects, and post-training support.