nextjs roadmap

在下面，您會找到一個全面的路線圖，展示了成為熟練的下一步的旅程。 JS產品工程師於2023年。最初是為Blazity的團隊成員設計的，我們很高興能與社區與社區分享此路線圖，以幫助有抱負和經驗豐富的開發人員。

留在循環中！給星星看？ GitHub存儲庫已通知有關新鮮內容和更新的通知。

如果您想聘請Next.js專家，請給我們發送信息[email protected]。

產品工程師是什麼意思？

產品工程師強調整個用戶體驗，融合前端，後端和設計。與“ Fullstack”開發人員不同，他們對技術有廣泛而不是深度的掌握，將它們應用於製作無縫產品。他們優先考慮快速部署和用戶反饋。在工程範圍內，他們專注於以用戶為中心的功能。該行業正在從“ Fullstack Engineer”標題過渡到“產品工程師”，而不僅僅是編碼更廣泛的作用。

免責聲明

該路線圖的目的是讓您了解景觀。如果您對接下來要學習的知識感到困惑，而不是鼓勵您選擇時髦和時尚的東西，則路線圖將指導您。您應該對為什麼一種工具比另一種工具更適合某些工具，並記住髖關節和時尚並不總是最適合這份工作的情況

路線圖

資源

1. 基本面：

   1. 反應
   2. 打字稿
      1. TS -RESET- A css重置用於打字稿，改進常見JavaScript API的類型
   3. next.js （類似框架：氫，蓋茨比，混音）

2. 渲染技術：

   1. 流
   2. SSG （靜態站點生成）
   3. SPR （無服務器預渲染）
   4. ISR （增量靜態再生）
      1. 固定的
      2. 一經請求
   5. CSR （客戶端渲染）
   6. SSR （服務器端渲染）
   7. 預覽模式

3. 樣式和UI：

   1. 預處理器：
      1. Sass
      2. Postcss
      3. 較少的
   2. JS中的CSS：
      1. 情感
      2. 樣式的組件
      3. 樣式系統
      4. 香草提取物
      5. Linaria
      6. CSS模塊
      7. parwindcss
   3. 組件庫：
      1. radix-ui
      2. Antd
      3. Nextui
      4. Ariakit
      5. 反應光譜
      6. Mui
      7. daisyui
      8. 脈輪
      9. 氟
      10. 壁爐
      11. Headlessui

4. 路由器：

   1. 應用路由器
      1. 服務器組件
      2. 客戶端組件
      3. 佈局
   2. 頁面路由器

5. 表現

   1. 水合
      1. 進行性水合
      2. 選擇性水合
      3. 重複性
   2. 下一個/圖像
   3. NEXT/腳本
   4. 下一個/字體
   5. 捆骨
   6. Partytown

6. 部署

   1. 託管
      1. 動詞
      2. GCP
      3. AWS
      4. Netlify
      5. azure
      6. Cloudflare
      7. 鐵路
      8. 使成為
      9. fly.io
      10. 數字海洋
   2. CDN
      1. Cloudflare
      2. Cloudfront
      3. keycdn
      4. Azurecdn
      5. CloudCdn
      6. 迅速
      7. akamai
   3. 多機
   4. IAC
      1. sst.dev
      2. 脈衝
      3. Terraform

7. 國家管理

   1. Zustand
   2. 上下文API
   3. Jotai
   4. Redux工具包
   5. 畏縮
   6. XSTATE
   7. mobx

8. 捆綁者

   1. webpack
   2. Turbopack

9. 測試

   1. E2E
      1. 劇作家
      2. 柏
      3. testcafe
   2. 單元
      1. 笑話
      2. vitest
   3. 一體化
      1. React測試庫
   4. 視覺的
      1. 故事書
      2. Docz
      3. React Styleguidist
      4. 反應宇宙

10. API通信

    1. 休息
       1. tanstack查詢（也可以與GraphQl一起使用）
       2. SWR（也可以與GraphQl一起使用）
    2. GraphQl
       1. 阿波羅
       2. 中繼
       3. URQL
       4. GraphQl-Request
    3. 網絡插座
       1. socket.io
       2. 很合理
       3. 凸
       4. 推動器
       5. PubNub
       6. Firebase實時數據庫
       7. supabase
    4. API路線 /路線處理程序
    5. grpc
    6. trpc

11. i18n

    1. 下一個翻譯
    2. 通明
    3. i18next
    4. 反應

12. 建築學

    1. 模塊化的
    2. 特徵設計
    3. monorepo
       1. Turborepo
       2. nx
       3. 勒納
    4. 整體

13. SEO

    1. 下一步
    2. @vercel/og

14. auth

    1. Nextauth
    2. 生氣
    3. 護照

15. 可觀察性

    1. OpentElemetry
    2. Datadog
    3. 新遺物
    4. 哨兵

？包起來

覺得路線圖的任何部分都有增強空間嗎？請考慮通過您的建議開設公關或通過問題來標記任何問題。我們致力於持續改進，因此您可能需要觀看/星庫以獲取以後的更新。

？貢獻

總是歡迎捐款！為了做出貢獻，請按照以下步驟：

1. 分叉存儲庫。
2. 創建一個具有描述名稱的新分支。
3. 進行更改，並提交它們。
4. 將更改推向分叉的存儲庫。
5. 創建拉動請求，我們將回顧您的更改。

？社區

如果您正在尋求幫助或只是想分享您對該項目的想法，我們鼓勵您加入我們的Discord社區。這是鏈接：https：//blazity.com/discord。這是我們交流想法並互相幫助的空間。每個人的意見都受到讚賞，我們期待歡迎您。