Roadmaps

NextJS

  1. Next.js foundations

    1. Understand what Next.js adds to React
    2. Create a project and explore the App Router
    3. Build pages, layouts, and nested routes
    4. Learn the difference between App Router and Pages Router

  2. Routing and navigation

    1. Create dynamic routes for pages and profiles
    2. Read route parameters and query strings
    3. Navigate with Link and preserve page state
    4. Add loading, error, and not-found pages

  3. Backend and requests

    1. Understand how Next.js handles requests on the server
    2. Create Route Handlers for APIs, webhooks, and custom responses
    3. Use Middleware for redirects, rewrites, and request checks
    4. Work with request data: headers, cookies, query parameters, and form data
    5. Connect server-side code to databases and external services
    6. Keep secrets and sensitive operations on the server

  4. Rendering model

    1. Understand server and client components
    2. Use “use client” for browser features and interactivity
    3. Learn how rendering, streaming, and hydration work
    4. Choose between static and dynamic rendering
    5. Understand server-side rendering (SSR) and when it runs
    6. Compare SSR with static rendering

  5. Data and caching

    1. Fetch data in server components
    2. Load data in parallel
    3. Understand caching and revalidation
    4. Handle loading, empty, and error states

  6. Forms and mutations

    1. Build forms with Server Actions
    2. Validate and process data on the server
    3. Show pending, success, and error states
    4. Refresh or revalidate data after changes

  7. Styling and backend

    1. Use CSS Modules or global styles
    2. Optimize images and fonts
    3. Create Route Handlers for APIs and webhooks
    4. Connect to a database and protect secrets

  8. Security and deployment

    1. Add authentication and server-side authorization
    2. Protect pages, data, and actions
    3. Test routes, forms, and data flows
    4. Build and deploy a production app