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, participants will 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.