json-server 是什麼？前端開發很常用的假 API 工具介紹

Sat, 23 May 2026 20:05:00 +0800

前端開發最常遇到的問題之一，就是畫面想先做，但 API 還沒完成。這時候，如果還要自己手刻一個後端，只是為了讓前端有資料可以串，通常很浪費時間。json-server 就是在解決這個問題。

json-server 的 npm 頁面介紹的是一個非常實用的工具：你只要準備一份 JSON 資料，它就能快速幫你產生一組可用的 REST API。對前端工程師來說，這代表你不用等後端，也能先把列表、表單、編輯、刪除這些功能做起來。

這個網站在做什麼？

這個網站其實是 npm 上的套件介紹頁。它的用途不是單純下載，而是讓開發者快速了解：

以 json-server 這頁來看，頁面上可以直接看到安裝指令：

1

npm i json-server

也可以看到最基本的啟動方式：

1

npx json-server db.json

這兩個資訊就已經很夠你快速上手。

它最核心的功能，就是把一個 JSON 檔案變成一組 REST API。

例如你有一個 db.json：

1
2
3
4
5
6


{
 "posts": [
 { "id": 1, "title": "Hello" },
 { "id": 2, "title": "World" }
 ]
}

啟動 json-server 後，就可以得到類似下面的 API：

1
2
3
4
5
6


GET /posts
GET /posts/1
POST /posts
PUT /posts/1
PATCH /posts/1
DELETE /posts/1

這代表什麼？代表你前端原本需要後端才能做的 CRUD 流程，現在可以先自己模擬出來。

原因很實際，因為它真的省時間。

第一，它可以讓前端先開發，不用卡在「API 還沒好」。第二，它很適合做 demo、作品集、教學範例。第三，它能讓你提早驗證資料格式和畫面流程。第四，它的使用門檻低，不需要先寫很多後端程式。

如果你是 React 開發者，這種工具特別方便，因為你可以直接拿 fetch 或 axios 去串它，流程和串正式 API 很接近。

根據我查看頁面時的內容，截至 2026-05-23，可以看到幾個重點：

這些資訊代表它不是冷門工具，而是真的有不少開發者在使用。不過也要注意，頁面顯示的版本仍然是 beta，如果你要放進正式團隊開發流程，最好先確認版本相容性和使用情境。

json-server 很適合這幾種情況：

但它比較不適合拿來當真正的正式後端。因為它的主要目的是開發輔助，不是完整商業系統的後端解法。

如果你把 json-server 想成「前端開發時的假後端工具」，這個理解基本上就是對的。它最大的價值不是功能多複雜，而是可以讓你非常快地把資料流跑起來。對前端來說，這件事很重要，因為很多畫面問題、互動問題、狀態管理問題，都要真的有 API 可以串時才會看得清楚。

所以，如果你常常碰到「前端要先做，但 API 還沒來」這種情況，那 json-server 是非常值得認識的一個工具。