tech-studies

Next.js

2 min read

Next.js

roadmap.sh: https://roadmap.sh/nextjs

Suggested path through the Next.js nodes. Each node links to its lesson when written.

Nodes

Prerequisites

  • JavaScript Basics
  • React Frameworks
  • Introduction to Next.js
  • Setting Things Up
  • create-next-app

Routing fundamentals

  • Next.js Routing Basics
  • Routing Terminology
  • Defining Routes (Pages)
  • Structuring Routes
  • Layouts and Templates
  • Routing Patterns
  • Route Matcher
  • Dynamic Routes
  • Redirects

Advanced routing

  • Intercepting Routes
  • Parallel Routes
  • Internationalization (i18n)
  • Middleware

Rendering strategies

  • Rendering Strategies Overview
  • Static vs Dynamic
  • Client-Side Rendering (CSR)
  • Server-Side Rendering (SSR)
  • Static Site Generation (SSG)
  • SPA vs SSR
  • Static Export
  • Rendering Pages
  • Loading and Streaming
  • Error States
  • Runtimes and Types (Node.js vs Edge)

Data fetching

  • Data Fetching Patterns
  • Fetching Locations (Server vs Client)
  • Parallel vs Sequential Fetching
  • Preloading Data
  • Server Actions
  • API Endpoints (Route Handlers)
  • Setting Headers

Caching

  • Caching Overview
  • Caching Data
  • Memoization in fetch
  • React cache
  • Revalidating Cached Data
  • Revalidation Errors

Styling

  • Global CSS
  • CSS Modules
  • CSS-in-JS
  • Sass
  • Tailwind CSS

Optimization

  • Images
  • Fonts
  • Scripts
  • Static Assets
  • Lazy Loading
  • Package Bundling
  • Third-Party Libraries
  • Metadata
  • Markdown and MDX

Configuration

  • Environment Variables
  • Handling Sensitive Data
  • Custom Server
  • Composition Patterns

Testing

  • Jest
  • Playwright
  • Cypress
  • ESLint
  • Prettier

Observability

  • Instrumentation
  • OpenTelemetry
  • Analytics
  • Memory Usage

Deployment

  • Preparing for Production
  • Deployment Options
  • Adapters
  • Docker Container
  • Node.js Server

Ecosystem

  • Remix
  • Astro

Resources

See resources.md.

Project ideas

  • Build a full-stack blog with the App Router using MDX posts, ISR revalidation, and dynamic OG image generation.
  • Build an e-commerce storefront with Server Actions for cart mutations, streaming product lists, and Stripe checkout.
  • Build an authenticated dashboard with middleware-protected routes, parallel routes for modals, and edge-cached analytics.

1 item under this folder.