React & Next.js Roadmap

React is built on modern JavaScript. Make sure you're solid on these before starting.

• Arrow functions, destructuring, and spread
• Array methods — map, filter, reduce
• Modules — import and export
• Promises and async/await
• Template literals and optional chaining

Learn to build UIs as a tree of reusable components.

• JSX — HTML-in-JavaScript
• Functional components and props
• useState — managing local state
• Lists, keys, and conditional rendering
• Event handling in React
• Lifting state up between components

Hooks are the heart of modern React. Master the essentials.

• useEffect — side effects and cleanup
• useRef — persisting values without re-renders
• useContext — sharing state without prop drilling
• useMemo and useCallback — performance
• Custom hooks — extracting reusable logic

Next.js is the go-to React framework for production apps. Learn its modern App Router.

• File-based routing — pages, layouts, and groups
• Server Components vs Client Components
• Loading and error boundary files
• Dynamic routes and generateStaticParams
• Parallel and intercepted routes
• Metadata API for SEO

Most apps fetch data. Learn the right patterns for server and client-side fetching.

• Fetching in Server Components — async/await
• Server Actions — mutations without API routes
• React Query / SWR for client-side data
• Optimistic updates and loading states
• Zustand or Jotai for global client state
• Caching and revalidation with Next.js

Every real app needs auth. Learn to protect routes and manage sessions.

• Auth.js (NextAuth) setup with providers
• JWT vs session-based authentication
• Protecting routes with middleware
• Role-based access control
• Storing users in a database

Ship confidently with tests and automated deployments.

• Vitest for unit and integration tests
• React Testing Library — testing components
• Playwright for end-to-end tests
• Deploying to Vercel
• Preview deployments and branch-based CI