Next Mastery Roadmap

What does the critical path to Next.js mastery look like?

FUNDAMENTALS → DATA → PATTERNS → ARCHITECTURE → PRODUCTION
     │            │        │            │              │
     ▼            ▼        ▼            ▼              ▼
  RSC basics   Fetching  Components  Clean layers   Deploy gates
  Routing      Mutations Composition Type boundaries Monitoring
  File conv.   Caching   State mgmt  Testing        Scaling

Each section builds on the previous. Check items as you master them.

React Server Components

• Asynchronous Components
• RSC vs Client Components — when each applies
• Client-Server Composition — Server wrapping Client
• Component Directives — 'use client', 'use server'

Routing and File Conventions

• Pages, Loading, Error, Not Found
• Static vs Dynamic Pages
• Shared and Nested Layouts
• Route Groups and Private Folders
• Route Handlers
• Router and Link Components
• Redirects

Data Fetching

Pattern	When	Where
Server Component fetch	Data needed at render time	RSC with async/await
Server Action	Mutations, form submissions	'use server' functions
React Query	Client-side cache, optimistic updates	Client Components with prefetch
URL state	Filters, pagination, shareable state	searchParams not useState

• Streaming with Suspense and fallback loading
• Partial Pre-Rendering

Server Actions

• Declaration and invocation
• Usage in Client Components
• Usage in Server Components
• With and without forms

CRUD Operations

• Create, Read, Update, Delete
• Server-side sorting, searching, filtering
• Offset-based pagination
• Cursor-based pagination

Database and ORM

• Domain modelling and schema definition
• Seeding and migrations
• Partial selection and joins
• Upserts and transactions

Authentication and Authorization

• Sign up, sign in, sign out
• Get current session, exclude sensitive data
• Conditional UI components
• Protected routes
• Protected Server Actions

Caching

• Full Route Cache
• Request Memoization
• Data and Router Cache
• generateStaticParams() for known paths
• Client-side cache via React Query

Component Patterns

Rule	Why	Check
Server-first	Smaller bundles, direct data access	'use client' only where needed
Single responsibility	Testable, composable, replaceable	Each component does one job
Composition over props	Avoids prop explosion	Use children, slots, compound components
Constants extracted	No magic numbers, no hardcoded strings	Constants file or environment variables
TypeScript strict	Compiler catches errors before runtime	strict: true, no implicit any

• Reusable Components
• Component Composition — children, slots, compound
• Controlled Components
• Mediator Components

State and Hooks

• useState, useEffect, useRef
• useTransition
• useFormStatus, useActionState
• useSearchParams vs searchParams prop
• URLSearchParams and typed params
• Custom Hooks

React Query

• Prefetching in Server Components
• Initial state in Client Components
• Refetching and invalidation
• Infinite scrolling with Intersection Observer

Validation and Feedback

• Server-side validation with Zod
• Form-field feedback
• Toast feedback
• Feedback after redirect

TypeScript

• Inference and assertions
• ReturnType and Awaited
• Type merging
• Generics

Styling

• Utility-first CSS (Tailwind)
• Light and dark mode
• Animations
• Responsive design
• Conditional classes

Architecture

• Clean Architecture — hexagonal patterns
• Type-first development — compiler as methodology
• Inversion of control
• Domain → Contract → View transformations
• Feature folder structure
• Happy and unhappy paths

Layers

• UI Layer — components, actions, routes
• Action Layer — use cases, orchestrators
• Query Layer — repositories, adapters
• Public API Layer — ports, DTOs, entities

Progressive Enhancement

• Works without JavaScript
• Fallback with <noscript>

KOLs

Key Opinion Leaders and trending narratives:

• @jherr
• @t3dotgg
• @ByteGrad
• @WebDevCody
• @convex-dev

Context

• Best Practices — Pre-deploy checklist
• Flow Engineering — Maps that produce architecture
• Type-First — Compiler as methodology
• Clean Architecture — Hexagonal patterns
• Component Driven Development — CDD principles