├── LICENSE
└── README.md
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2023 Blazity
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 
2 |
3 |
4 |
Next.js Product Engineer Roadmap
5 | Roadmap to becoming a Next.js Product Engineer in 2023
6 |
7 | 
8 | 
9 | 
10 | 
11 | 
12 |
13 |
14 |
15 |
16 | 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.
17 |
18 | Stay in the loop! Give a [star :star:](https://github.com/Blazity/nextjs-roadmap/stargazers) and watch :eyes: the [GitHub Repo](https://github.com/Blazity/nextjs-roadmap) to get notified about fresh content and updates.
19 |
20 | If you're looking to [hire a Next.js specialist](https://blazity.com/?utm_source=nexjsroadmap&utm_medium=github), drop us a message at [contact@blazity.com](mailto:contact@blazity.com).
21 |
22 | ## What does Product Engineer mean?
23 |
24 | 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.
25 |
26 | ## Disclaimer
27 |
28 | > 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
29 |
30 | ## Roadmap
31 |
32 | 
33 |
34 | ## Resources
35 |
36 | 1. Fundamentals:
37 | 1. **React**
38 | 2. **Typescript**
39 | 1. [ts-reset](https://github.com/total-typescript/ts-reset) - a CSS reset for TypeScript, improving types for common JavaScript API's
40 | 4. **Next.js** (similar frameworks: [Hydrogen](https://hydrogen.shopify.dev/), [Gatsby](https://www.gatsbyjs.com/), [Remix](https://remix.run/))
41 |
42 | 2. Rendering Techniques:
43 | 1. **[Streaming](https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming)**
44 | 2. **[SSG](https://nextjs.org/docs/pages/building-your-application/rendering/static-site-generation)** (Static Site Generation)
45 | 3. **[SPR](https://vercel.com/blog/serverless-pre-rendering)** (Serverless Pre-rendering)
46 | 4. **[ISR](https://nextjs.org/docs/pages/building-your-application/data-fetching/incremental-static-regeneration)** (Incremental Static Regeneration)
47 | 1. Fixed
48 | 2. [On-demand](https://nextjs.org/docs/pages/building-your-application/data-fetching/incremental-static-regeneration#using-on-demand-revalidation)
49 | 6. **[CSR](https://nextjs.org/docs/pages/building-your-application/rendering/client-side-rendering)** (Client-Side Rendering)
50 | 7. **[SSR](https://nextjs.org/docs/pages/building-your-application/rendering/server-side-rendering)** (Server-Side Rendering)
51 | 8. **[Preview Mode](https://nextjs.org/docs/pages/building-your-application/configuring/preview-mode)**
52 |
53 | 3. Styling & UI:
54 | 1. Preprocessors:
55 | 1. [Sass](https://sass-lang.com/)
56 | 2. [PostCSS](https://postcss.org/)
57 | 3. [Less](https://lesscss.org/)
58 | 3. CSS in JS:
59 | 1. [Emotion](https://emotion.sh/docs/introduction)
60 | 2. [Styled Components](https://styled-components.com/)
61 | 3. [Styled System](https://github.com/styled-system/styled-system)
62 | 4. [Vanilla Extract](https://vanilla-extract.style/)
63 | 5. [Linaria](https://github.com/callstack/linaria)
64 | 6. [CSS Modules](https://github.com/css-modules/css-modules)
65 | 7. [TailwindCSS](https://tailwindcss.com/)
66 | 5. Component Libraries:
67 | 1. [radix-ui](https://www.radix-ui.com/)
68 | 2. [antd](https://ant.design/)
69 | 3. [nextui](https://nextui.org/)
70 | 4. [ariakit](https://ariakit.org/)
71 | 5. [react-spectrum](https://react-spectrum.adobe.com/react-spectrum/)
72 | 6. [mui](https://mui.com/)
73 | 7. [daisyui](https://daisyui.com/)
74 | 8. [chakra](https://chakra-ui.com/)
75 | 9. [fluentui](https://developer.microsoft.com/en-us/fluentui#/)
76 | 10. [mantine](https://mantine.dev/)
77 | 11. [headlessui](https://headlessui.com/)
78 | 4. Routers:
79 | 1. [App Router](https://nextjs.org/docs/app)
80 | 1. [Server Components](https://nextjs.org/docs/app/building-your-application/rendering/server-components)
81 | 2. [Client Components](https://nextjs.org/docs/app/building-your-application/rendering/client-components)
82 | 3. [Layouts](https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts)
83 | 3. [Pages Router](https://nextjs.org/docs/pages)
84 | 5. Performance
85 | 1. Hydration
86 | 1. [Progressive Hydration](https://www.patterns.dev/posts/progressive-hydration)
87 | 2. [Selective Hydration](https://www.patterns.dev/posts/react-selective-hydration)
88 | 3. [Resumability](https://qwik.builder.io/docs/concepts/resumable/)
89 | 2. [next/image](https://nextjs.org/docs/pages/api-reference/components/image)
90 | 3. [next/script](https://nextjs.org/docs/pages/api-reference/components/script)
91 | 4. [next/font](https://nextjs.org/docs/pages/api-reference/components/font)
92 | 5. [BundleAnalyzer](https://www.npmjs.com/package/webpack-bundle-analyzer)
93 | 6. [Partytown](https://partytown.builder.io/)
94 | 6. Deployment
95 | 1. Hosting
96 | 1. [Vercel](https://vercel.com/)
97 | 2. [GCP](https://blog.logrocket.com/how-to-deploy-next-js-on-google-cloud-run/)
98 | 3. [AWS](https://docs.aws.amazon.com/amplify/latest/userguide/deploy-nextjs-app.html)
99 | 4. [Netlify](https://www.netlify.com/)
100 | 5. [Azure](https://learn.microsoft.com/en-us/azure/static-web-apps/deploy-nextjs-hybrid)
101 | 6. [Cloudflare](https://developers.cloudflare.com/pages/framework-guides/deploy-a-nextjs-site/)
102 | 7. [Railway](https://docs.railway.app/getting-started)
103 | 8. [Render](https://render.com/docs/deploy-nextjs-app)
104 | 9. [Fly.io](https://fly.io/docs/js/frameworks/nextjs/)
105 | 10. [Digital Ocean ](https://docs.digitalocean.com/developer-center/deploy-a-next.js-app-to-app-platform/)
106 | 2. CDN
107 | 1. [Cloudflare](https://www.cloudflare.com/application-services/products/cdn/)
108 | 2. [CloudFront](https://aws.amazon.com/cloudfront/)
109 | 3. [KeyCDN](https://www.keycdn.com/)
110 | 4. [AzureCDN](https://azure.microsoft.com/en-us/products/cdn/)
111 | 5. [CloudCDN](https://cloud.google.com/cdn)
112 | 6. [Fastly](https://www.fastly.com/products/cdn)
113 | 7. [Akamai](https://www.akamai.com/solutions/content-delivery-network)
114 | 3. [MultiZones](https://nextjs.org/docs/pages/building-your-application/deploying/multi-zones)
115 | 4. IaC
116 | 1. [SST.dev](https://sst.dev/)
117 | 2. [Pulumi](https://www.pulumi.com/)
118 | 3. [Terraform](https://www.terraform.io/)
119 | 7. State Management
120 | 1. [Zustand](https://github.com/pmndrs/zustand)
121 | 2. [Context API](https://react.dev/reference/react/createContext)
122 | 3. [Jotai](https://jotai.org/)
123 | 4. [Redux Toolkit](https://redux-toolkit.js.org/)
124 | 5. [Recoil](https://recoiljs.org/)
125 | 6. [XState](https://xstate.js.org/)
126 | 7. [MobX](https://mobx.js.org/README.html)
127 | 8. Bundlers
128 | 1. [Webpack](https://webpack.js.org/)
129 | 2. [Turbopack](https://turbo.build/pack)
130 | 9. Testing
131 | 1. E2E
132 | 1. [Playwright](https://playwright.dev/)
133 | 2. [Cypress](https://www.cypress.io/)
134 | 3. [TestCafe](https://testcafe.io/)
135 | 2. Unit
136 | 1. [Jest](https://jestjs.io/)
137 | 2. [Vitest](https://vitest.dev/)
138 | 3. Integration
139 | 1. [React Testing Library ](https://testing-library.com/docs/react-testing-library/intro/)
140 | 4. Visual
141 | 1. [StoryBook](https://storybook.js.org/)
142 | 2. [Docz](https://www.docz.site/)
143 | 3. [React Styleguidist](https://react-styleguidist.js.org/)
144 | 4. [React Cosmos](https://reactcosmos.org/)
145 | 10. API Communication
146 | 1. REST
147 | 1. [TanStack Query](https://tanstack.com/query/latest)(works with GraphQL too)
148 | 2. [SWR](https://swr.vercel.app/) (works with GraphQL too)
149 | 2. GraphQL
150 | 1. [Apollo](https://www.apollographql.com/)
151 | 2. [Relay](https://relay.dev/)
152 | 3. [URQL](https://formidable.com/open-source/urql/)
153 | 4. [Graphql-request](https://www.npmjs.com/package/graphql-request)
154 | 3. Web Sockets
155 | 1. [Socket.io](https://socket.io/)
156 | 2. [Ably](https://ably.com/)
157 | 3. [Convex](https://www.convex.dev/)
158 | 4. [Pusher](https://vercel.com/guides/deploying-pusher-channels-with-vercel)
159 | 5. [PubNub](https://www.pubnub.com/)
160 | 6. [Firebase Realtime Database](https://firebase.google.com/docs/database)
161 | 7. [Supabase](https://supabase.com/realtime)
162 | 4. [Api Routes](https://nextjs.org/docs/pages/building-your-application/routing/api-routes) / [Route Handlers](https://nextjs.org/docs/app/building-your-application/routing/route-handlers)
163 | 5. gRPC
164 | 6. [tRPC](https://trpc.io/docs/client/nextjs/setup)
165 | 11. i18n
166 | 1. [next-translate](https://github.com/aralroca/next-translate)
167 | 2. [lingui](https://lingui.dev/)
168 | 3. [i18next](https://react.i18next.com/)
169 | 4. [react-intl](https://github.com/formatjs/formatjs)
170 | 12. Architecture
171 | 1. Modular
172 | 2. [Feature-Sliced Design](https://feature-sliced.design/)
173 | 3. Monorepo
174 | 1. [Turborepo](https://turbo.build/)
175 | 2. [NX](https://nx.dev/)
176 | 3. [Lerna](https://lerna.js.org/)
177 | 4. Monolith
178 | 13. SEO
179 | 1. [next-seo](https://github.com/garmeeh/next-seo)
180 | 2. [@vercel/og](https://vercel.com/docs/functions/edge-functions/og-image-generation)
181 | 14. Auth
182 | 1. [NextAuth](https://next-auth.js.org/)
183 | 2. [IronSession](https://github.com/vvo/iron-session)
184 | 3. [Passport](https://www.passportjs.org/)
185 | 15. Observability
186 | 1. [OpenTelemetry](https://opentelemetry.io/)
187 | 2. [DataDog](https://vercel.com/integrations/datadog)
188 | 3. [New Relic](https://github.com/newrelic/newrelic-node-nextjs)
189 | 4. [Sentry](https://docs.sentry.io/platforms/javascript/guides/nextjs/)
190 |
191 |
192 | ## 🚦 Wrap Up
193 |
194 | 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.
195 |
196 | ## 🙌 Contribution
197 |
198 | Contributions are always welcome! To contribute, please follow these steps:
199 |
200 | 1. Fork the repository.
201 | 2. Create a new branch with a descriptive name.
202 | 3. Make your changes, and commit them.
203 | 4. Push your changes to the forked repository.
204 | 5. Create a pull request, and we'll review your changes.
205 |
206 | ## 📡 Community
207 |
208 | 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](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.
209 |
210 |
211 |
212 | 
213 |
214 |
215 |
--------------------------------------------------------------------------------