Next.js Fundamentals Training
This 2-day intensive training takes participants from zero Next.js knowledge to confidently building, styling, and deploying full-stack React applications with Next.js 15. Every concept is reinforced with hands-on labs building a real project from scratch. By the end, participants will have a working application deployed to production.
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.
Ready to get started?
Request a training quote for your team — in-person, live-online, or hybrid.