MODULE_04intermediate

Next.js Core

Modern React Framework

App Router, rendering strategies, data fetching, and the gateway to full-stack.

10Units
2Projects
2Interactive
35-40hEst. Time
App RouterSSR/SSG/ISRData fetchingRoute Handlers

UNITS

10 LESSONS
01
theory2h

Next.js 15 App Router

// ...

Framework overview

App directoryFile conventionsServer/Client components
02
hands-on3h

Routing & Layouts

// ...

File-based routing

Nested routesLayoutsLoading/Error UI
03
hands-on2h

Dynamic Routes

// ...

Parameters and catch-all

Dynamic segmentsOptional catch-allParallel routes
04
interactive3h

SSR vs SSG vs ISR

// ...

Rendering strategies

When to use eachPerformance implicationsCaching
05
hands-on3h

Data Fetching

// ...

Server-side data

Fetch in Server ComponentsCachingRevalidation
06
hands-on2h

Metadata & SEO

// ...

SEO optimization

Metadata APIOpen GraphStructured data
07
theory2h

Route Handlers

// ...

API endpoints in Next.js

HTTP methodsRequest/ResponseUse cases
08
theory2h

Server Actions Intro

// ...

Mutations without APIs

Form actionsSerializationOptimistic updates
09
theory2h

Authentication Concepts

// ...

Auth patterns overview

Session vs JWTNextAuth overviewMiddleware
10
hands-on3h

Protected Routes

// ...

Auth-gated content

Middleware authServer-side checksRedirect patterns

PROJECTS

2 BUILDS

Content Site

10h

Blog with MDX and SEO

Next.jsMDXMetadata

REQUIREMENTS

  • MDX blog posts
  • SEO metadata
  • RSS feed
  • Sitemap

Dashboard Shell

6h

Auth skeleton for future apps

AuthLayoutsRouting

REQUIREMENTS

  • Login/signup pages
  • Protected layout
  • User session

INTERACTIVE

2 TOOLS

Rendering Mode Compare

SSR/SSG/ISR side-by-side

15 min

Route Visualizer

File to route mapper

10 min