FREE TUTORIALS · Learn from zero to expertBusiness DirectoryPut Your Business Ad Here — Free
Independent course disclaimer · expand / collapse

These are independently developed tutorials. Technology names belong to their respective owners; no endorsement is implied. Examples are educational, not guarantees. Verify commands, costs, security, browser support, and framework versions before production use. Google Translate requires internet and can make mistakes. Terms · Privacy · Legal.

Fundamentals → Mastery guide · Six levels, practical projects, topic checklist, worked code and results.
EasyTutorGuide · Free practical course · Six levels

Next.js — from absolute beginner to advanced professional practice

Start without knowing any terminology. Work through the chapters in order, read the small explanations, edit the code, check the visible output, and answer twenty practice questions in every chapter.

145 chapters6 levels20 answered questions per chapterMobile + RTL/LTRYouTube narration flow

Start Chapter 1

Level 1 · Absolute Beginner

Work through these topics in order, practising the example and answering the questions in each chapter before continuing.

  1. Chapter 1: What Next.js Adds to React
  2. Chapter 2: Prerequisites and Node Setup
  3. Chapter 3: Create Your First App
  4. Chapter 4: App Router Folder Structure
  5. Chapter 5: Understand page.tsx
  6. Chapter 6: Understand layout.tsx
  7. Chapter 7: Global CSS and Fonts
  8. Chapter 8: Root Layout Metadata
  9. Chapter 9: Link Component Navigation
  10. Chapter 10: Nested Layouts
  11. Chapter 11: Static Route Segments
  12. Chapter 12: Dynamic Route Segments
  13. Chapter 13: Route Parameters
  14. Chapter 14: Search Parameters
  15. Chapter 15: Server Components by Default
  16. Chapter 16: When to Use Client Components
  17. Chapter 17: Add use client Directive
  18. Chapter 18: React State in Client Pages
  19. Chapter 19: Event Handlers and Forms
  20. Chapter 20: Image Optimization Basics
  21. Chapter 21: Public Assets Directory
  22. Chapter 22: Environment Variables Overview
  23. Chapter 23: Development and Build Commands
  24. Chapter 24: Project: Multi Page Portfolio

Level 2 · Foundation

Work through these topics in order, practising the example and answering the questions in each chapter before continuing.

  1. Chapter 25: File Based Routing Practice
  2. Chapter 26: Route Groups
  3. Chapter 27: Parallel Routes Overview
  4. Chapter 28: Intercepting Routes Overview
  5. Chapter 29: Loading UI with loading.tsx
  6. Chapter 30: Error UI with error.tsx
  7. Chapter 31: Not Found with not-found.tsx
  8. Chapter 32: Redirect and Permanent Redirect
  9. Chapter 33: Navigation from Server Code
  10. Chapter 34: Active Navigation States
  11. Chapter 35: Streaming with Suspense
  12. Chapter 36: Fetch Data in Server Components
  13. Chapter 37: Async Server Page Patterns
  14. Chapter 38: Promise Props in Next.js
  15. Chapter 39: Fetch Data in Client Components
  16. Chapter 40: Caching Mental Models
  17. Chapter 41: Server Actions / Functions
  18. Chapter 42: Mutating Data with Forms
  19. Chapter 43: useActionState for Status
  20. Chapter 44: Optimistic UI with useOptimistic
  21. Chapter 45: Revalidation after Mutations
  22. Chapter 46: Route Handlers for JSON
  23. Chapter 47: Request and Response Objects
  24. Chapter 48: Project: Article Directory

Level 3 · Intermediate

Work through these topics in order, practising the example and answering the questions in each chapter before continuing.

  1. Chapter 49: Route Handler GET
  2. Chapter 50: Route Handler POST
  3. Chapter 51: Validate Request Payloads
  4. Chapter 52: Cookies and Headers
  5. Chapter 53: Authentication Concepts
  6. Chapter 54: Sessions and Secure Cookies
  7. Chapter 55: Middleware and Proxy Conventions
  8. Chapter 56: Authorization Server Checks
  9. Chapter 57: SQL Query Layer Concepts
  10. Chapter 58: ORM Integration Patterns
  11. Chapter 59: Prisma with Next.js
  12. Chapter 60: Data Access Layer Design
  13. Chapter 61: Server Only Modules
  14. Chapter 62: Secret Handling
  15. Chapter 63: Caching and Revalidation Patterns
  16. Chapter 64: Cache Tags and Invalidation
  17. Chapter 65: use cache Directive
  18. Chapter 66: Error Handling in Mutations
  19. Chapter 67: Zod Form Validation
  20. Chapter 68: Multipart Form Upload
  21. Chapter 69: Pagination and Filters
  22. Chapter 70: URL Driven Search State
  23. Chapter 71: Dynamic Metadata
  24. Chapter 72: Project: Simple CRUD Portal

Level 4 · Advanced

Work through these topics in order, practising the example and answering the questions in each chapter before continuing.

  1. Chapter 73: Static and Dynamic Rendering
  2. Chapter 74: Static Generation and Prerendering
  3. Chapter 75: Incremental Static Regeneration
  4. Chapter 76: Streaming HTML Responses
  5. Chapter 77: Hydration and Client Boundaries
  6. Chapter 78: Bundle Splitting
  7. Chapter 79: Dynamic Imports
  8. Chapter 80: Next Image Sizes
  9. Chapter 81: Modern Font Loading
  10. Chapter 82: SEO Titles and Open Graph
  11. Chapter 83: Sitemap Generation
  12. Chapter 84: Robots and Canonical URLs
  13. Chapter 85: JSON LD Structured Data
  14. Chapter 86: Internationalized Routing
  15. Chapter 87: RTL and Locale Content
  16. Chapter 88: Accessible Navigation
  17. Chapter 89: Accessible Forms
  18. Chapter 90: Keyboard Accessible Dialogs
  19. Chapter 91: Core Web Vitals
  20. Chapter 92: Optimize Largest Contentful Paint
  21. Chapter 93: Optimize Interaction Responsiveness
  22. Chapter 94: Prevent Layout Shift
  23. Chapter 95: Next.js Web Analytics
  24. Chapter 96: Project: Publishing Platform

Level 5 · Expert

Work through these topics in order, practising the example and answering the questions in each chapter before continuing.

  1. Chapter 97: Unit Test React Components
  2. Chapter 98: Testing Server Components
  3. Chapter 99: End to End Playwright
  4. Chapter 100: Mock Route Handlers
  5. Chapter 101: Integration Test Mutations
  6. Chapter 102: Error Boundaries and Logging
  7. Chapter 103: Tracing and Monitoring
  8. Chapter 104: Security Headers
  9. Chapter 105: Content Security Policy
  10. Chapter 106: Protect Server Actions
  11. Chapter 107: Validate External URLs
  12. Chapter 108: Request Rate Limiting
  13. Chapter 109: Authentication with Auth Libraries
  14. Chapter 110: Role Based Permissions
  15. Chapter 111: Edge Runtime Tradeoffs
  16. Chapter 112: Node Runtime Tradeoffs
  17. Chapter 113: Backend for Frontend
  18. Chapter 114: Webhook Handlers
  19. Chapter 115: Background Tasks Limits
  20. Chapter 116: Image Storage Integration
  21. Chapter 117: API Versioning
  22. Chapter 118: Scaling Data Fetching
  23. Chapter 119: Performance Profiling
  24. Chapter 120: Project: Storefront

Level 6 · Mastery

Work through these topics in order, practising the example and answering the questions in each chapter before continuing.

  1. Chapter 121: Production Architecture
  2. Chapter 122: Feature Folder Strategy
  3. Chapter 123: Monorepo Packages
  4. Chapter 124: Server First Component Composition
  5. Chapter 125: Multi Tenant Routing
  6. Chapter 126: Multi Locale Publishing
  7. Chapter 127: Advanced Cache Topologies
  8. Chapter 128: Streaming Large Dashboards
  9. Chapter 129: Complex Search and Filters
  10. Chapter 130: Data Table Virtualization
  11. Chapter 131: Optimistic Mutation Recovery
  12. Chapter 132: Incremental Migration from Pages Router
  13. Chapter 133: Upgrade Strategy
  14. Chapter 134: CI and Deployment Pipelines
  15. Chapter 135: Deploy on Node Hosting
  16. Chapter 136: Deploy on Vercel
  17. Chapter 137: Static Export Constraints
  18. Chapter 138: Hostinger Static Export Workflow
  19. Chapter 139: Hostinger Node Hosting Workflow
  20. Chapter 140: Observability and Error Budgets
  21. Chapter 141: Security Review for Deployments
  22. Chapter 142: Capstone: Course Platform
  23. Chapter 143: Capstone: Booking SaaS
  24. Chapter 144: Mastery: Audit a Production App
  25. Chapter 145: Final Project: Full Stack Portal

How to learn like a complete beginner

You do not need to learn every word in one reading. Read the lesson, type the example, look at its real output, change one part, and explain what changed. Return when you have forgotten something. For frameworks requiring an installer or compiler, the source must be tested in a real project—not only in the browser-only illustration.

Suggest an improvement or share a learning idea on the blog.

Disclaimer, trademarks and learning guidance

Independent educational material. External names are used solely to identify subjects. These tutorials are not official training or certification. Output may vary by browser and software version. If a framework requires a build tool, the standalone browser demonstration is an illustration, not execution of the framework source. Always test your own code before publication. Legal notice.