這裡主要會講些技術層面的東西，如果想了解考核題目的設計&思考過程(更是我在 AI 時代下重新定義工程師價值的心路歷程)可以點擊下方:

點我前往:如何設計一場不被 AI 破解的考核？我的題目設計思考過程

---

後端架構

點我前往後端的GitHub

為什麼我棄用 Spring Boot 改選 Next.js API Routes？

既然要考前端的 API 串接與狀態處理，我當然必須提供一套穩定的後端服務。

我之前用 Spring Boot 來寫給學弟妹串接的後端，但說真的，Spring Boot 雖然嚴謹，但對於輕量專案或初學者來說真的太過繁重。只是要寫一個簡單的 GET 查詢，就要開好幾個檔案、分 Controller / Service / Repository / DTO / Entity 等無數階層。這種多模組與Over-engineering，在目前這個規模下顯得有些多此一舉。

為了讓開發更敏捷、架構更親民，這次我改用 Next.js API Routes 來建立後端 API。

Next.js API Routes

雖然 Next.js 沒有強制規定目錄規範，不過我結合了過去的前後端實務經驗，精煉出一套「關注點分離 Separation of Concerns, SoC，卻又不過度複雜」的輕量架構：

├── app/
│   └── api/                  # 【Controller 層】API Routes (路由與前端對接)
├── services/                 # 【Service / DB 操作層】負責 SQL 參數化查詢與業務邏輯
├── lib/                      # 【Infrastructure / 工具層】核心基礎設施
│   ├── mysql.ts              # 資料庫連線（解析連線 URL / Pool）
│   ├── schemas.ts            # 輸入驗證（使用 Zod / 防禦性欄位檢查）
│   ├── env.ts                # 環境變數檢測（環境變數防禦機制）
│   └── types.d.ts            # TypeScript 介面與型態定義 (Interface)Code language: PHP (php)

各層級職責說明：

1. app/api/（Controller 層）：
   • 負責 API 路徑對應與 HTTP Request / Response 處理。
   • 與前端直接對接，接收參數後呼叫服務層，再將結果回傳。
2. services/（Service / DAO 層）：
   • 專門負責主要業務邏輯與資料庫互動。
   • 使用參數化查詢（Parameterized Queries）撰寫 SQL 語句，避免 SQL Injection，確保安全。
3. lib/（Library 基礎設施層）：
   • mysql.ts：封裝連線池（Connection Pool）與 URL 解析邏輯。
   • schemas.ts：使用 Zod（或類似套件）做輸入資料的防禦性驗證（如：檢查數字是否非零、非空、非負數）。
   • env.ts：防禦性機制，專案啟動時自動檢查是否缺少必要的 .env 設定檔，避免運行時意外 Crash。
   • types.d.ts：定義前端串接所需的 Request/Response TypeScript interface，提升型別安全。

環境隔離與 Docker 化部署

當後端服務與資料庫寫好後，我立刻意識到一個嚴重的實務問題：如果讓所有考生在同一時間串接「同一個遠端後端」，一定會引爆災難。

1. Data Race：考生 A 在修改/刪除這筆資料，考生 B 正好在查詢同一筆資料，導致除錯時產生極大干擾。
2. 連線與服務崩潰：所有人同時併發打請求，甚至有考生寫出 Infinite Loop 把後端打垮，全場其他人的考試都會被一起拖下水。
3. 無效溝通與除錯：根本無法釐清到底是我（考生本人）的前端 Code 寫錯，還是別人動到了後端資料。

為了確保「每位考生都有完全獨立、互不干擾的測試後端與資料庫」，我採用了 Docker 來實現環境隔離：

我的開發&打包端環境

將 Next.js 後端打包成 300MB 左右的 Image 後，掛載至 GitHub Releases 供下載與拉取。

.
├── sql/
│   └── init.sql             # 自動匯入 DB Schema 與初始測試資料
├── Dockerfile               # 將 Next.js API 後端打包成約 300MB 的 Image 並推上 Docker Hub
└── docker-compose.yml       # 本地開發與測試環境腳本
    Code language: PHP (php)

給考生的 Exam-Kit 考試包：

完全不包含後端原始碼，乾淨又方便。

考生只需要前往 GitHub：

1. 下載 Releases：取得已打包好的發布檔與環境檔。
2. Clone Exam-Kit：取得專案設定。
3. 一鍵啟動：照著 README.md 輸入指令，就能在自己電腦的 Docker 上一秒啟動專屬的後端 API 與資料庫。

即便不小心把資料庫搞爛，重跑一次指令 3 秒鐘即可復原，讓學生能無後顧之憂地專注在前端 UI/UX 的開發與串接上！

Exam-Kit/
├── docker-compose.yml       # 自動拉取 Docker Hub 上的後端 Image + 啟動 MySQL
└── README.md                # 懶人指令指南Code language: PHP (php)