Next.js Full Stack Roadmap — Step-by-step Learning Path
Full-stack React apps using Next.js with server-side rendering and API routes
The Next.js Full Stack roadmap
- Internet Basics — beginner
- How the Internet Works — beginner
- DNS & Hosting — beginner
- HTTP/HTTPS & Browsers — beginner
- HTML — beginner
- HTML Basics & Document Structure — beginner
- Semantic HTML — beginner
- Text, Headings & Lists — beginner
- Forms & Inputs — beginner
- Tables — beginner
- Media & Embedding — beginner
- Meta Tags & Basic SEO — beginner
- Web Accessibility (a11y) Basics — beginner
- CSS — beginner
- CSS Basics & Selectors — beginner
- The Box Model — beginner
- Positioning & Display — beginner
- Flexbox — beginner
- CSS Grid — beginner
- Responsive Design & Media Queries — beginner
- CSS Variables & Custom Properties — beginner
- Transitions & Animations — beginner
- Utility-First CSS: Tailwind — intermediate
- JavaScript — beginner
- Syntax & Variables — beginner
- Data Types & Operators — beginner
- Control Flow — beginner
- Functions & Scope — beginner
- Arrays & Array Methods — beginner
- Objects & Object Methods — beginner
- ES6+ Features — beginner
- DOM Manipulation & Events — beginner
- Asynchronous JavaScript — beginner
- Fetch API & AJAX — beginner
- Error Handling & Debugging — beginner
- JavaScript Modules — beginner
- JSON & Data Handling — beginner
- TypeScript — beginner
- TypeScript Basics & Types — beginner
- Interfaces & Type Aliases — beginner
- Functions & Generics — beginner
- Typing React Components & Props — beginner
- Modules & Project Configuration — beginner
- Advanced Types — beginner
- Developer Tools & Version Control — beginner
- Command Line Basics — beginner
- Code Editor Setup — beginner
- Browser DevTools — beginner
- Git Basics — beginner
- Branching & Merging — beginner
- Remote Repositories & GitHub — beginner
- Pull Requests & Code Review — beginner
- Git Workflows & Merge Conflicts — beginner
- React Fundamentals — intermediate
- React Fundamentals & JSX — intermediate
- Components & Props — intermediate
- State & useState — intermediate
- Event Handling in React — intermediate
- Conditional Rendering & Lists — intermediate
- Forms & Controlled Components — intermediate
- useEffect & Side Effects — intermediate
- Context API — intermediate
- Custom Hooks — intermediate
- Component Styling — intermediate
- MongoDB — intermediate
- MongoDB Basics — intermediate
- CRUD Operations — intermediate
- MongoDB Compass & Atlas Setup — intermediate
- Mongoose ODM Basics — intermediate
- Schema Design & Data Modeling — intermediate
- Relationships: Embedding vs Referencing — intermediate
- Indexing & Query Optimization — intermediate
- Aggregation Pipeline — intermediate
- Connection Handling in a Serverless Environment — advanced
- Next.js — intermediate
- Next.js Fundamentals & Project Setup — intermediate
- App Router & File-Based Routing — intermediate
- Server Components vs Client Components — intermediate
- Layouts, Templates & Nested Routing — intermediate
- Data Fetching & Caching — intermediate
- Static Site Generation (SSG) — intermediate
- Server-Side Rendering (SSR) — intermediate
- Incremental Static Regeneration (ISR) — advanced
- API Routes / Route Handlers — intermediate
- Server Actions & Mutations — advanced
- Middleware — advanced
- Image & Font Optimization — intermediate
- Metadata & SEO — intermediate
- Environment Variables & Configuration — intermediate
- Mini Project: Full-Stack Next.js App — advanced
- Full Stack Integration (Next.js Stack) — advanced
- Connecting Route Handlers & Server Actions to MongoDB — advanced
- Environment Configuration Across Dev/Prod — advanced
- File Uploads in a Serverless Environment — advanced
- Real-Time Feature Considerations — advanced
- Mini Project: Full CRUD Next.js Stack App — advanced
- Authentication & Security — advanced
- Authentication Basics — advanced
- Authentication with Auth.js (NextAuth) — advanced
- Password Hashing (bcrypt) — advanced
- OAuth & Social Login — advanced
- Role-Based Access Control — advanced
- Protecting Routes with Middleware — advanced
- Security Headers & Hardening — advanced
- Testing — advanced
- Testing Fundamentals — advanced
- Unit Testing with Jest/Vitest — advanced
- Testing Components (React Testing Library) — advanced
- Testing Route Handlers & Server Actions — advanced
- End-to-End Testing (Playwright/Cypress) — advanced
- Deployment & DevOps — advanced
- Environment & Build Configuration for Production — advanced
- Deploying to Vercel — advanced
- Self-Hosting Next.js — advanced
- MongoDB Atlas Production Setup — advanced
- CI/CD Basics (GitHub Actions) — advanced
- Docker Basics for Next.js Apps — advanced
- Domain, DNS & HTTPS Setup — advanced
- Production Best Practices & Performance — advanced
- Logging & Monitoring — advanced
- Error Tracking (Sentry) — advanced
- Caching Strategies — advanced
- Bundle Analysis & Code Splitting — advanced
- API Rate Limiting & Throttling — advanced
- Core Web Vitals & Performance Auditing — advanced
- Clean Code, Linting & Code Reviews — advanced
- Advanced & Bonus Topics — advanced
- Prisma ORM & SQL Databases — advanced
- tRPC for End-to-End Type Safety — advanced
- GraphQL as an Alternative to Route Handlers — advanced
- Turborepo & Monorepos — advanced
- Progressive Web Apps (PWA) — advanced
- Capstone: Production-Ready Next.js Full-Stack Portfolio Project — advanced