【Next.js】實作Issue Tracker Project
前言
趁著過年這段集中的時間，好好的從頭到尾跟完Mosh Hamedani的Next.js課程。實作Issue tracker的項目在Part 2，進入實作之前，已經先順過一輪Part 1的理論內容，最後成品算是勉強跟完了70%左右的內容，花了3~4個半天的時間，一邊照教學影片作業，一邊看文件研究吸收，畢竟本來就是做前後端都碰的工作，底層概念上尚且需要花點時間轉換跟熟悉。
綜覽
架構示意圖
首先，Next.js是一個基於React.js的全端框架，而React.js是一個前端的函式庫。
基本上頁面是由各個react component(組件)所組成，和純前端的react差異在於預設所有的組件都是在後端渲染，即SSR(Server-Side Rendering 伺服器端渲染)，需要畫面元件動態互動的話，要在組件頂端多加上use client，組件就會改以CSR(Client-Side Rendering)處理。
預設的路由會以專案資料夾的階層進行查找，資料夾為該頁面命名，頁面的呈現需要一個page.tsx做處理(用的是TypeScript)。如果網址列請求需要查詢參數，則須建立一層資料夾命名在中括號中，例如[id]代表使用id作為查詢參數。
而要建立api而不是頁面的話，資料夾內建立route.ts的檔案，裡面實作GET、POST、PUT、DELETE等邏輯，就可以完成了。
專案綜覽
資料庫方面使用MySQL，以Prisma進行ORM(Object Relational Mapping)的對應處理。這裡原本懶得另外安裝圖形化介面工具，只透過安裝時一併加入的Command Line Client進行處理，為了效率最後找了vscode內的插件(Database Client JDBC)幫助開發。
資料表
API測試方面，還是用我使用上順手的thunderClient。
成果
進入頁面進行google帳號登入後，可看到現有的議題，沒登入的話僅能進行檢視。
點擊議題連結，可個別編輯內容或刪除
刪除
可將議題更換指派的人員
指派人員
編輯議題，透過SimpleMDE跟react-markdown，進行編輯跟呈現markdown撰寫的內容
編輯頁面
總結
雖然沒有跟完全部內容，主要想從中學習的大方向也都有碰到，例如：
- 從零開始建立起一個產品等級的應用程式
- 重構技巧
- 專案架構分層
- 新增/刪除/查詢/修改、session及異常處理
- 授權認證機制（GCP、OAuth2.0)
- git commit點的顆粒度切分
- 手機/平板顯示結果，以及使用devtool進行問題除錯
- 自行看官網文件找使用方式跟問題處理
- cache機制及衍生問題
- Data cache
- Full route cache (cache on the server)
- Router cache client-side cache)
後面的圖表、Vercel佈署上正式、sentry進行監控追蹤等，暫時還沒時間研究
至少在這短短幾天的精神時光屋中，學會不少維護性的設計考量。
