Re:Nuxt

11/20
Lesson 11

Server Routes

建立後端 API

本章將帶你建立第一支後端 API，體驗 Nuxt 的全端開發能力。

1 核心概念

在 Nuxt 專案中，server/ 資料夾就是你的後端領地。

檔案即 API (File-based Routing for API)

這跟前端的 Page 路由很像：

檔案位置：server/api/hello.ts

自動產生的 API 網址：http://localhost:3000/api/hello

語法架構

你不需要像 Express 那樣寫 app.get('/', (req, res) => ...)。Nuxt 使用更簡潔的 defineEventHandler：

export default defineEventHandler((event) => {
// 直接回傳物件，Nitro 會自動轉成 JSON
return { message: 'Hello World' }
})

2 給 Claude Code 的中文指令 實作重點

我們要寫一支能回傳「當下伺服器時間」的 API，並在前端顯示出來。

請複製以下指令給 Claude：

請幫我建立第一支後端 API：

  1. 在根目錄（不是 app 目錄）建立 server/api/ 資料夾。
  2. 建立 API 檔案 server/api/hello.ts：
    • 使用 defineEventHandler。
    • 回傳一個物件：{ message: 'Hello from Nitro!', time: new Date() }。
  3. 建立一個前端測試頁面 app/pages/server-test.vue：
    • 使用 useFetch('/api/hello') 來呼叫剛剛寫好的 API。
    • 在畫面上顯示 API 回傳的訊息 (message) 和時間 (time)。

3 驗收重點

請檢查 Claude 完成後的結果：

目錄結構檢查：

確認 server/ 資料夾是在最外層：

nuxt4-learn/
├── app/
├── server/api/hello.ts ← 正確位置
├── nuxt.config.ts

直接訪問 API (Browser/Postman)：

打開瀏覽器，直接輸入網址 http://localhost:3000/api/hello

你應該會看到純 JSON 格式的回傳值：

{
"message": "Hello from Nitro!",
"time": "2025-12-23T07:00:00.000Z"
}

前端整合測試：

  1. 打開 http://localhost:3000/server-test
  2. 畫面應該顯示出那段訊息和時間。
這代表你的「前端 Vue」成功跟「後端 Nitro」通訊了！

💡 架構師筆記 (Universal Rendering)

為什麼要用 Nuxt 寫 API 而不另外開一個 Python/Go Server？

除了開發方便（同一個專案、同一種語言），最大的優勢是 Type Safety (型別安全)。

因為前後端都在一起，未來你可以讓前端直接讀取後端的 TypeScript 定義。當你後端改了 API 欄位，前端會直接報錯提醒你，這是分離式架構很難做到的。
11