【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撰寫的內容

編輯頁面

總結

雖然沒有跟完全部內容，主要想從中學習的大方向也都有碰到，例如：

1. 從零開始建立起一個產品等級的應用程式
2. 重構技巧
3. 專案架構分層
4. 新增/刪除/查詢/修改、session及異常處理
5. 授權認證機制（GCP、OAuth2.0)
6. git commit點的顆粒度切分
7. 手機/平板顯示結果，以及使用devtool進行問題除錯
8. 自行看官網文件找使用方式跟問題處理
9. cache機制及衍生問題
   - Data cache
   - Full route cache (cache on the server)
   - Router cache client-side cache)

後面的圖表、Vercel佈署上正式、sentry進行監控追蹤等，暫時還沒時間研究
至少在這短短幾天的精神時光屋中，學會不少維護性的設計考量。