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
Navigation
- 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