nextjs-roadmap

<p align="center"> <h2 align="center">Next.js 产品工程师路线图</h2> <p align="center">2023年成为Next.js产品工程师的路线图</p> <p align="center"> <a href="https://twitter.com/intent/tweet?text=https://github.com/Blazity/nextjs-roadmap 2023年成为Next.js产品工程师的路线图" target="_blank"><img src="https://yellow-cdn.veclightyear.com/835a84d5/4f27e3ee-6de6-4d47-9d0b-c6a7e8171107.svg?logo=twitter&logoColor=white" style="display: inherit;"/></a> <a href="https://www.linkedin.com/sharing/share-offsite/?url=https://github.com/Blazity/nextjs-roadmap&mini=true&title=2023年成为Next.js产品工程师的路线图" target="_blank"><img src="https://yellow-cdn.veclightyear.com/835a84d5/3130077a-dac8-4208-b9f3-bee1ea0debe9.svg?logo=linkedin&logoColor=white" style="display: inherit;"/></a> <a href="https://blazity.com/?utm_source=nexjsroadmap&utm_medium=github"><img src="https://yellow-cdn.veclightyear.com/835a84d5/96223ecd-b4e3-49f0-b7c7-f4e487016406.svg" style="display: inherit;"/></a> <a href="https://blazity.com/?utm_source=nexjsroadmap&utm_medium=github" target="_blank"><img alt="Blazity" src="https://yellow-cdn.veclightyear.com/835a84d5/fb3bfd05-dd1a-4e07-a044-579884ca6080.svg" style="display: inherit;"/></a> <a href="https://opensource.org/licenses/MIT/" target="_blank"><img alt="MIT License" src="https://yellow-cdn.veclightyear.com/835a84d5/9db5467c-4b8f-4a52-9353-96e251d0301f.svg" style="display: inherit;"/></a> </p> <br> </p>

以下是一份全面的路线图，展示了2023年成为熟练Next.js产品工程师的journey。最初为我们Blazity的团队成员设计，我们很高兴与社区分享这份路线图，以帮助有抱负的和经验丰富的开发者。

保持关注！给GitHub仓库一个星标:star:并关注:eyes:，以获得最新内容和更新的通知。

如果你正在寻找雇佣Next.js专家，请发送邮件至contact@blazity.com与我们联系。

什么是产品工程师？

产品工程师注重整体用户体验，融合前端、后端和设计。与"全栈"开发者不同，他们对技术有广泛而非深入的掌握，将其应用于打造无缝产品。他们优先考虑快速部署和用户反馈。在工程领域中，他们专注于以用户为中心的功能。行业正从"全栈工程师"向"产品工程师"的称谓转变，突出了比单纯编码更广泛的角色。

免责声明

本路线图的目的是让你了解整个领域的情况。如果你对接下来要学习什么感到困惑，这份路线图将为你提供指导，而不是鼓励你选择时髦和流行的东西。你应该了解为什么在某些情况下一种工具比另一种更适合，并记住时髦和流行并不总是意味着最适合这项工作。

路线图

资源

1. 基础知识：

   1. React
   2. Typescript
      1. ts-reset - TypeScript的CSS重置，改进了常见JavaScript API的类型
   3. Next.js（类似框架：Hydrogen、Gatsby、Remix）

2. 渲染技术：

   1. 流式渲染
   2. 静态站点生成（SSG）
   3. 无服务器预渲染（SPR）
   4. 增量静态再生（ISR）
      1. 固定
      2. 按需
   5. 客户端渲染（CSR）
   6. 服务器端渲染（SSR）
   7. 预览模式

3. 样式和UI：

   1. 预处理器：
      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. 组件库：
      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. 路由：

   1. 应用路由
      1. 服务器组件
      2. 客户端组件
      3. 布局
   2. 页面路由

5. 性能

   1. 水合
      1. 渐进式水合
      2. 选择性水合
      3. 可恢复性
   2. next/image
   3. next/script
   4. next/font
   5. BundleAnalyzer
   6. Partytown

6. 部署

   1. 托管
      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. 多区域
   4. 基础设施即代码（IaC）
      1. SST.dev
      2. Pulumi
      3. Terraform

7. 状态管理

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

8. 打包工具

   1. Webpack
   2. Turbopack

9. 测试

   1. 端到端测试
      1. Playwright
      2. Cypress
      3. TestCafe
   2. 单元测试
      1. Jest
      2. Vitest
   3. 集成测试
      1. React Testing Library
   4. 视觉测试
      1. StoryBook
      2. Docz
      3. React Styleguidist
      4. React Cosmos

10. API通信

    1. REST
       1. TanStack Query（也适用于GraphQL）
       2. SWR（也适用于GraphQL）
    2. GraphQL
       1. Apollo
       2. Relay
       3. URQL
       4. Graphql-request
    3. WebSocket
       1. Socket.io
       2. Ably
       3. Convex
       4. Pusher
       5. PubNub
       6. Firebase实时数据库
       7. Supabase
    4. API路由 / 路由处理程序
    5. gRPC
    6. tRPC

11. 国际化

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

12. 架构

    1. 模块化
    2. 特性切片设计
    3. 单体仓库
       1. Turborepo
       2. NX
       3. Lerna
    4. 单体应用

13. SEO

    1. next-seo
    2. @vercel/og

14. 认证

    1. NextAuth
    2. IronSession
    3. Passport

15. 可观察性

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

🚦 总结

如果您认为路线图的任何部分还有改进空间，请考虑提交PR或通过问题报告任何疑虑。我们致力于持续改进，因此您可能想要关注/收藏此仓库以获取未来更新。

🙌 贡献

我们始终欢迎贡献！要贡献，请遵循以下步骤：

1. 复刻仓库。
2. 创建一个具有描述性名称的新分支。
3. 进行更改并提交。
4. 将更改推送到复刻的仓库。
5. 创建拉取请求，我们将审核您的更改。

📡 社区

如果您需要帮助或只是想分享对项目的看法，我们鼓励您加入我们的Discord社区。以下是链接：https://blazity.com/discord。这是一个交流想法和互相帮助的空间。我们欢迎每个人的意见，期待您的加入。 <br /> <a href="https://blazity.com/discord" style="width: 100%; display: flex; justify-content: center;"> <img src="https://yellow-cdn.veclightyear.com/835a84d5/a6d93bb4-e959-40c2-96e1-344238d8452a.png?style=banner2" alt="Blazity Discord 横幅"/> </a> <br />