Next.js Product Engineer Roadmap 2023

Your roadmap to becoming a Next.js Product Engineer in 2023. Explore the latest trends, best practices, and resources to excel with Next.js.

Welcome to the Next.js Product Engineer Roadmap for 2023! This roadmap was originally crafted to guide our team members, but we're excited to make it available to the wider developer community, whether you're just starting out or a seasoned pro.

Stay tuned for updates! Show your support by starring ⭐ this GitHub repository and watching 👀 it to stay informed about new content and updates.

If you're interested in hiring a Next.js specialist, feel free to reach out to us at abbasi.android@gmail.com.

What is a Product Engineer?

Product Engineers are professionals who place a strong emphasis on delivering exceptional user experiences by seamlessly integrating frontend development, backend development, and design principles. Unlike traditional "fullstack" developers, they possess a broad rather than deep knowledge of various technologies, utilizing this knowledge to create cohesive and user-friendly products. Their primary focus is on swift deployment and collecting valuable user feedback. In the realm of engineering, Product Engineers prioritize user-centric features and solutions. The industry is evolving, shifting from the title "Fullstack Engineer" to "Product Engineer," reflecting a broader and more inclusive role beyond mere coding.

Disclaimer

The purpose of this roadmap is to provide you with a comprehensive overview of the landscape. Instead of merely following what's currently popular and trendy, this roadmap aims to guide you when you're uncertain about your next learning steps. It encourages you to gain a deeper understanding of why certain tools are better suited for specific use cases than others. Always keep in mind that what's hip and trendy may not necessarily be the best fit for the task at hand.

Roadmap

Resources

1. Fundamentals:

   1. React
   2. Typescript
      1. ts-reset - a CSS reset for TypeScript, improving types for common JavaScript API's
   3. Next.js (similar frameworks: Hydrogen, Gatsby, Remix)

2. Rendering Techniques:

   1. Streaming
   2. SSG (Static Site Generation)
   3. SPR (Serverless Pre-rendering)
   4. ISR (Incremental Static Regeneration)
      1. Fixed
      2. On-demand
   5. CSR (Client-Side Rendering)
   6. SSR (Server-Side Rendering)
   7. Preview Mode

3. Styling & UI:

   1. Preprocessors:
      1. Sass
      2. PostCSS
      3. Less
   2. CSS in JS:
      1. Emotion
      2. Styled Components
      3. Styled System
      4. Vanilla Extract
      5. Linaria
      6. CSS Modules
      7. TailwindCSS
   3. Component Libraries:
      1. radix-ui
      2. antd
      3. nextui
      4. ariakit
      5. react-spectrum
      6. mui
      7. daisyui
      8. chakra
      9. fluentui
      10. mantine
      11. headlessui

4. Routers:

   1. App Router
      1. Server Components
      2. Client Components
      3. Layouts
   2. Pages Router

5. Performance

   1. Hydration
      1. Progressive Hydration
      2. Selective Hydration
      3. Resumability
   2. next/image
   3. next/script
   4. next/font
   5. BundleAnalyzer
   6. Partytown

6. Deployment

   1. Hosting
      1. Vercel
      2. GCP
      3. AWS
      4. Netlify
      5. Azure
      6. Cloudflare
      7. Railway
      8. Render
      9. Fly.io
      10. Digital Ocean
   2. CDN
      1. Cloudflare
      2. CloudFront
      3. KeyCDN
      4. AzureCDN
      5. CloudCDN
      6. Fastly
      7. Akamai
   3. MultiZones
   4. IaC
      1. SST.dev
      2. Pulumi
      3. Terraform

7. State Management

   1. Zustand
   2. Context API
   3. Jotai
   4. Redux Toolkit
   5. Recoil
   6. XState
   7. MobX

8. Bundlers

   1. Webpack
   2. Turbopack

9. Testing

   1. E2E
      1. Playwright
      2. Cypress
      3. TestCafe
   2. Unit
      1. Jest
      2. Vitest
   3. Integration
      1. React Testing Library
   4. Visual
      1. StoryBook
      2. Docz
      3. React Styleguidist
      4. React Cosmos

10. API Communication

    1. REST
       1. TanStack Query(works with GraphQL too)
       2. SWR (works with GraphQL too)
    2. GraphQL
       1. Apollo
       2. Relay
       3. URQL
       4. Graphql-request
    3. Web Sockets
       1. Socket.io
       2. Ably
       3. Convex
       4. Pusher
       5. PubNub
       6. Firebase Realtime Database
       7. Supabase
    4. Api Routes / Route Handlers
    5. gRPC
    6. tRPC

11. i18n

    1. next-translate
    2. lingui
    3. i18next
    4. react-intl

12. Architecture

    1. Modular
    2. Feature-Sliced Design
    3. Monorepo
       1. Turborepo
       2. NX
       3. Lerna
    4. Monolith

13. SEO

    1. next-seo
    2. @vercel/og

14. Auth

    1. NextAuth
    2. IronSession
    3. Passport

15. Observability

    1. OpenTelemetry
    2. DataDog
    3. New Relic
    4. Sentry

🚦 Final Thoughts

Have ideas for improving any sections of this roadmap? We invite you to open a Pull Request (PR) with your suggestions or raise any concerns through issues. We're dedicated to ongoing refinement, so consider starring and watching this repository for future updates.

🙌 How to Contribute

Your contributions are invaluable to us! To get started, please follow these steps:

1.Fork this repository. 2.Create a new branch with a descriptive name. 3.Implement your changes and commit them. 4.Push your changes to your forked repository. 5.Initiate a pull request, and we'll thoroughly review your contributions.