LINE 點餐系統重構之路：從 Razor Pages 到 Next.js 的全面進化

前言

2022 年 12 月開發的 Line 點餐系統，當時的技術架構為：

Server：.NET 6 + Razor Pages + SQL Server
Client：Bootstrap 5 + Vue.js
Admin：Vite + Vue 3 (純前端)

直到 2025 年，該系統僅供特定的 2~3 家店家使用，且未對外開放其他店家使用。

近期因閒暇時間較多，加上 AI 開發工具崛起，決定對系統進行大改重構，完善功能，目標是將系統對外開放運營，並提供引導式設定讓店家可以在後台快速上手。

重構重點

準備在原有的基礎上，優化底層架構並增加店家後台功能。

技術換血
預計汰除原有的 Razor Pages + Vue.js，改用全現代化前端架構：
- Framework: Next.js
- Language: TypeScript
- Style: Tailwind CSS
功能升級
- 全面支援 RWD 響應式設計
- 優化店家 SEO
- 新增「自取外帶」與「店內用餐」模式
- 使用者上傳菜單照片，透過AI解析匯入系統
- 一鍵發布圖文選單到Line官方帳號
- 出單機串接提示
- 購物車狀態同步優化 (解決跨裝置/跨瀏覽器問題)
- 多分店支援
- 優化 LINE Login 轉導體驗 (消除轉跳白屏、加速載入)
- 金流設定 & 金流報表優化
- 出單機設定 & 出單機報表優化
後端重構
- 升級目標：.NET 6 -> .NET 10 (預計採用最新版以獲得最佳效能)
- 架構優化：將原本 Service 層與 DB 查詢混雜的邏輯抽離，導入 Repository Pattern 或依照 Clean Architecture 原則重新分層。
- API 效能：針對高併發的點餐場景進行優化 (e.g., Redis Cache, Async/Await 徹底落實)。
- 資料庫：SQL Server 索引優化與正規化調整。

系統架構對比 (System Architecture)

為了讓未來維護更輕鬆，這次重構在架構上做了很大的調整，從原本的單體式混合架構，轉向職責分明的多層式架構。

🚫 改版前：耦合過重 (Legacy)

舊版架構中，Razor Pages 負責了大部分的邏輯，而 Service 層常常直接參照 DB Context，導致邏輯與資料存取緊密耦合，難以測試。

    graph TD
    User((消費者))
    Admin((店家管理員))
    Line((Line App))
    
    subgraph "Server (.NET 6)"
        RP["Razor Pages<br>(UI + Controller)"]
        CTRL["Web API Controller"]
        SVC["Service Layer<br>(Business Logic + DB Query)"]
        EF[Entity Framework Core]
    end

    subgraph "Frontend"
        Vue["Vue 3 + Vite<br>(店家後台 SPA)"]
    end
    
    DB[(SQL Server)]
    
    User --> Line
    Line --> RP
    Admin --> Vue
    Vue --> CTRL
    RP --> SVC
    CTRL --> SVC
    SVC --> EF
    EF --> DB
    
    %% Style
    style RP fill:#f9f,stroke:#333
    style CTRL fill:#512bd4,stroke:#fff,color:#fff
    style SVC fill:#ff9,stroke:#333
    style Vue fill:#42b883,stroke:#333

✅ 改版後：職責分離 (Refactored)

新版架構引入了 Repository Pattern 與 BFF (Backend for Frontend) 的概念。

Next.js 作為 BFF，處理前端路由與輕量級邏輯。
API Layer 專注於提供資料，不處理 UI 邏輯。
Service Layer 只負責商業邏輯驗證。
Repository Layer 專心處理資料庫連線與查詢。

    graph TD
    User((消費者))
    Admin((店家管理員))
    Line((Line App))
    Web((Web 瀏覽器))
    
    subgraph "Frontend"
        Next["Next.js<br>(點餐頁面 SSR)"]
        Vue["Vue 3 + Vite<br>(店家後台 SPA)"]
    end

    subgraph "Backend (.NET 10)"
        API[Web API Controller]
        Logic["Service Layer<br>(Business Logic)"]
        Redis[(Redis Cache)]
        Repo["Repository Layer<br>(Data Access)"]
    end
    
    DB[(SQL Server)]
    
    User --> Line
    User --> Web
    Line --> Next
    Web --> Next
    Admin --> Vue
    Next --> API
    Vue --> API
    API --> Logic
    Logic --> Redis
    Redis -->|Cache Miss| Repo
    Repo --> DB
    
    %% Style
    style Next fill:#61dafb,stroke:#333
    style Vue fill:#42b883,stroke:#333
    style API fill:#512bd4,stroke:#fff,color:#fff
    style Logic fill:#2d79c7,stroke:#fff,color:#fff
    style Redis fill:#dc382d,stroke:#fff,color:#fff
    style Repo fill:#00947e,stroke:#fff,color:#fff