Blazity/nextjs-roadmap

Next.js Product Engineer Roadmap

Roadmap to becoming a Next.js Product Engineer in 2023

Below you'll find a comprehensive roadmap showcasing the journey to becoming a proficient Next.js Product Engineer in 2023. Initially designed for our team members at Blazity, we're thrilled to share this roadmap with the community to aid aspiring and seasoned developers alike.

Stay in the loop! Give a star :star: and watch :eyes: the GitHub Repo to get notified about fresh content and updates.

If you're looking to hire a Next.js specialist, drop us a message at [email protected].

What does Product Engineer mean?

Product Engineers emphasize the entire user experience, blending frontend, backend, and design. Unlike "fullstack" developers, they have a broad, not deep, grasp of technologies, applying them to craft seamless products. They prioritize rapid deployment and user feedback. In the engineering spectrum, they focus on user-centric features. The industry is transitioning from the title "Fullstack Engineer" to "Product Engineer", highlighting a broader role than just coding.

Disclaimer

The purpose of this roadmap is to give you an idea about the landscape. The road map will guide you if you are confused about what to learn next, rather than encouraging you to pick what is hip and trendy. You should grow some understanding of why one tool would be better suited for some cases than the other and remember hip and trendy does not always mean best suited for the job

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

🚦 Wrap Up

Feel there's room for enhancement in any sections of the roadmap? Please consider opening a PR with your suggestions or flag any concerns via issues. We're committed to continuous improvement, so you might want to watch/star this repository for future updates.

🙌 Contribution

Contributions are always welcome! To contribute, please follow these steps:

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

📡 Community

If you're looking for help or simply want to share your thoughts about the project, we encourage you to join our Discord community. Here's the link: https://blazity.com/discord. It's a space where we exchange ideas and help one another. Everyone's input is appreciated, and we look forward to welcoming you.