Skip to main content

Next Mastery Roadmap

Data | Diagrams | Engineers

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

Follow​

React Server Components​

  • Asynchronous Components
  • RSC vs Client Components
  • Client-Server Composition
  • Component Directives

Data Fetching​

  • Streaming
  • Partial Pre-Rendering
  • Suspense
  • Fallback Loading

Server Actions​

  • Declaration
  • Usage Client Components
  • Usage Server Components
  • With and Without Forms

CRUD Operations​

  • Create a Record
  • Read a Record
  • Update a Record
  • Delete a Record

Database​

  • Domain Modelling
  • Schema Definition
  • Seeding & Migrations
  • UI Database Exploration

ORM​

  • Partial Selection
  • Joins (Relation Queries)
  • Upserts
  • Transactions

Authentication​

  • Sign Up a User
  • Sign In a User
  • Sign Out a User
  • Get Current Session
  • Exclude Sensitive Data

Authorization​

  • Conditional UI Components
  • Protected Routes
  • Protected Server Actions

Pages, Layouts, Templates​

  • Static vs Dynamic Pages
  • Shared and Nested Layouts
  • Stable Template
  • Route Handler

New Hooks​

  • useTransition
  • useFormStatus
  • useActionState

File Conventions​

  • Pages
  • Loading, Error, Not Found
  • Route Groups
  • Private Folders
  • Router & Link Components
  • Header & Sidebar
  • Tabs & Breadcrumbs
  • Redirects

Caching​

  • Full Route Cache
  • Request Memoization
  • Data & Router Cache
  • generateStaticParams()
  • Client-Side Cache

Validation & Feedback​

  • Server-Side Validation
  • Form-Field Feedback
  • Toast Feedback
  • Feedback after Redirect

Cookies​

  • User Preferences
  • Authentication
  • User Feedback

Progressive Enhancement​

  • Works without JavaScript
  • Fallback with <noscript>

Project Structure​

  • General Folder Structure
  • App Router Structure
  • Feature Folders
  • Shared Folders

Styling​

  • Light & Dark Mode
  • Utility-First CSS
  • Animations
  • Theming

Component Patterns​

  • Reusable Components
  • Component Composition
  • Controlled Components
  • Mediator Components

React​

  • useState, useEffect, useRef
  • cache, Suspense
  • cloneElement
  • useImperativeHandle
  • Custom Hooks
  • Prop Drilling

TypeScript​

  • Inference & Assertions
  • ReturnType & Awaited
  • Type Merging
  • Generics

CSS​

  • Vertical & Horizontal Layouts
  • Animations
  • Conditional Classes
  • Responsive Design

Server-Side Operations​

  • Sorting
  • Searching & Filtering
  • Offset-Based Pagination
  • Cursor-Based Pagination

Search Params​

  • useRouter, usePathname, useParams
  • useSearchParams vs Search Params
  • URLSearchParams & Typed Params
  • URL State & Default State

React Query​

  • Prefetching in Server Components
  • Initial State in Client Component
  • Client-Side State Management
  • Refetching & Invalidation
  • Infinite Scrolling
  • Intersection Observer

Architecture​

  • Clean Architecture
  • Singleton, Sliding Window
  • Inversion of Control
  • Premature Optimizations
  • DRY with Abstractions
  • Happy & Unhappy Paths
  • Configuration over Composition

Layers​

  • UI Layer
  • Action Layer
  • Query Layer
  • Public API Layer