Every Soma

Web Development · Intermediate

Next.js for Developers

Build production-ready web applications with Next.js: the App Router, Server Components, data fetching, and deployment.

Price
$49
Level
Intermediate
Duration
11 hours
Lessons
40 lessons
Projects
5 hands-on projects
Prerequisites
React fundamentals (components, props, state, hooks)

Overview

Next.js for Developers is an 11-hour course for developers who know React and want to build complete, production-grade applications. Across 40 lessons and 5 projects, you learn the framework's modern App Router architecture from the ground up.

The course covers the concepts that define current Next.js development: Server Components and when to use client components, file-based routing with layouts, data fetching and caching, and metadata for search engines.

The final modules focus on shipping: measuring and improving performance, and deploying applications properly. The capstone project is a complete content site built and deployed end to end.

What you'll learn

  • Structure applications with the App Router: routes, layouts, and pages
  • Understand Server Components and the server/client boundary
  • Implement dynamic routes and navigation
  • Fetch data on the server with caching and revalidation
  • Configure metadata for SEO: titles, descriptions, and canonical URLs
  • Optimize performance: images, fonts, and bundle size
  • Deploy Next.js applications to production
  • Complete 5 projects, including a fully deployed content site

Curriculum

7 modules · 40 lessons · 11 hours of material

  1. Module 1 — Next.js and the App Router

    • Why a framework on top of React
    • Project structure and conventions
    • Pages, layouts, and nested routes
  2. Module 2 — Server Components

    • Server vs. client components
    • The use client boundary
    • Composition patterns across the boundary
  3. Module 3 — Routing in Depth

    • Dynamic route segments
    • Linking and navigation
    • Loading and error states
    • Project: multi-page marketing site
  4. Module 4 — Data Fetching

    • Fetching data in Server Components
    • Caching and revalidation
    • Static generation with generateStaticParams
    • Project: data-driven catalog
  5. Module 5 — Metadata and SEO

    • The Metadata API
    • Dynamic metadata per page
    • Open Graph and canonical URLs
  6. Module 6 — Performance

    • Image and font optimization
    • Analyzing bundle size
    • Streaming and Suspense
  7. Module 7 — Deployment

    • Production builds
    • Environment variables and configuration
    • Deploying to a hosting platform
    • Final project: build and deploy a content site

Who this course is for

  • React developers ready to build full applications
  • Frontend developers who want server-side rendering skills
  • Developers building content sites, dashboards, or SaaS products
  • Graduates of React Fundamentals continuing the web development path

Prerequisites

React fundamentals (components, props, state, hooks)

Course outcomes

By the end of this course, you will be able to:

  • Build complete applications with the Next.js App Router
  • Make informed server/client component decisions
  • Implement fast, SEO-friendly pages with proper metadata
  • Deploy a production Next.js application end to end

Frequently asked questions

Do I need to know React before taking this course?

Yes. You should be comfortable with components, props, state, and hooks. React Fundamentals covers exactly this prerequisite.

Does the course cover the Pages Router?

The course focuses on the App Router, which is the current recommended architecture. Key differences from the Pages Router are noted where relevant for maintaining older projects.

Is TypeScript used in this course?

Yes, the projects use TypeScript with beginner-friendly typings. You do not need prior TypeScript experience; the course introduces what it uses.

Explore the full course catalog

Compare levels, durations, and prerequisites across all Every Soma courses.

Not sure this is the right course? Read the FAQ or start with a learning guide.