JSON Server Kullanımı: Saniyeler İçinde Sahte REST API
JSON Server ile tek bir db.json dosyasından tam REST API'si üretin. Filtreleme, ilişkiler, sayfalama ve tüm CRUD endpointlerinin pratik rehberi.
JSON Server, tek bir JSON dosyasından saniyeler içinde tam REST API üretebilen, frontend prototipleri ve demolar için tasarlanmış küçük ama güçlü bir araçtır. Backend hazır olmadan çalışmaya başlamak, mock servisler oluşturmak veya öğrenme/eğitim ortamı kurmak için en hızlı yoldur. Bu rehberde infografikteki tüm bölümleri açarak adım adım kurulumdan ileri kullanım senaryolarına kadar her şeyi anlatıyoruz.
JSON Server Nedir?
JSON dosyalarından REST API üreten ve hızlı bir şekilde sahte servis ayağa kaldıran bir Node.js paketidir. Tek dosyalı bir veritabanı (db.json) ile çalışır; ön tarafa bakan tüm CRUD operasyonları otomatik üretilir. Backend kodu yazmadan prototip ve eğitim ortamları için idealdir.
Neden JSON Server Kullanmalı?
Bir projeyi başlatırken backend'in hazır olmaması frontend ekibinin hızını yavaşlatır. JSON Server bu gecikmeyi ortadan kaldırır ve UI'ı gerçek bir API'ye karşı geliştirme hissi verir.
- Anında REST API başlatma — saniyeler içinde
- Veritabanı kurulumu yok — tek JSON dosyası yeterli
- Frontend gelişimini hızlandırır
- Demo ve eğitim ortamları için ideal
- Backend bağımlılığı olmadan çalışır
Kurulum
Global ya da proje bazlı kurabilirsiniz. Modern projelerde npm script üzerinden çalıştırmak en yaygın yaklaşımdır.
# Global
npm install -g json-server
# Çalışıyor mu kontrolü
npx json-server --versionVeritabanı Dosyası Oluşturma
JSON Server kök seviyede bir JSON nesnesi bekler. Her anahtar bir koleksiyon olarak ele alınır ve otomatik olarak /key adresinde erişilebilir hale gelir.
{
"posts": [
{ "id": 1, "title": "Hello", "views": 120 },
{ "id": 2, "title": "Mock API", "views": 87 }
],
"comments": [
{ "id": 1, "postId": 1, "body": "Harika!" }
],
"profile": { "name": "DevCards" }
}Sunucuyu Başlatma
Aşağıdaki komut db.json dosyasını dinleyerek 3000 portunda bir API sunucusu açar. --port ile portu, --delay ile yapay gecikme ekleyebilirsiniz.
npx json-server --watch db.json --port 3001 --delay 250REST API Endpointleri
Tüm fiilller otomatik üretilir; GET, POST, PUT, PATCH, DELETE doğrudan dosyaya yazar.
GET /posts → tüm post'lar
GET /posts/1 → tek post
POST /posts → yeni post (id otomatik)
PUT /posts/1 → tüm kaydı değiştir
PATCH /posts/1 → kısmi güncelleme
DELETE /posts/1 → silSorgu Özellikleri
Filtreleme, arama, sıralama ve sayfalama için zengin query parametreleri sunulur. Bu sayede gerçek bir API'ye çok yakın deneyim elde edilir.
# Filtreleme
GET /posts?views_gte=100
# Tam metin arama
GET /posts?q=hello
# Sıralama
GET /posts?_sort=views&_order=desc
# Sayfalama
GET /posts?_page=1&_limit=10İlişkiler (Relationships)
Foreign key alanlarıyla embed ve expand desteği vardır. /posts/1/comments gibi nested route'lar otomatik çalışır.
# Bir post'un yorumları
GET /posts/1/comments
# Embed: post içindeki yorumları aynı anda al
GET /posts?_embed=comments
# Expand: yorumun içindeki post bilgisini al
GET /comments?_expand=postTemel Özellikler
JSON Server tek başına epey yetenekli bir mock backend sunar:
- Tam CRUD desteği
- Otomatik oluşturulan route'lar
- Custom middleware ile route ekleyebilme
- Watch modunda dosya değişince yeniden yüklenir
- Yapay gecikme (--delay) ile gerçekçi simülasyon
- CORS desteği etkin
Kullanım Alanları
JSON Server hangi senaryolarda işe yarar:
- Frontend'i backend'den önce başlatmak
- API'lerin prototipini hızlıca test etmek
- Middleware'ler ve sahte verilerle demo hazırlamak
- Eğitim ve öğretim ortamları
- React Query gibi kütüphanelerle entegre çalıştırma
Özet
JSON Server; bir db.json dosyasını anında REST API'ye dönüştürür. Geliştirme süresini kısaltır, prototipler için mükemmeldir ve React Query gibi araçlarla sorunsuz çalışır. Üretim için tasarlanmış değildir; demo, prototip ve geliştirme amaçları için tercih edin.
Sıkça Sorulan Sorular
Bu konuda en çok merak edilenler.
JSON Server production'da kullanılabilir mi?
Hayır. Eş zamanlı yazma korumaları, kimlik doğrulama, indeksleme veya ölçeklenebilirlik özellikleri yoktur. Production için Express, Fastify, NestJS veya Supabase/Firebase gibi BaaS hizmetlerini tercih edin.
Kimlik doğrulama eklenebilir mi?
Evet, json-server-auth middleware'i ile JWT tabanlı auth ekleyebilir veya kendi Express middleware'inizi yazabilirsiniz. routes.json dosyasıyla ek özelleştirmeler de mümkün.
Veriler nereye kaydediliyor?
Her POST/PUT/PATCH/DELETE doğrudan db.json dosyasına yazılır. Bu yüzden orijinal seed verisini ayrı bir dosyada (db.seed.json) tutmak iyi bir pratiktir.
Gerçek backend'e geçince ne değişir?
fetch çağrılarınızı API client (axios, ky, ofetch) üzerinden ve baseURL ile yapıyorsanız, sadece environment variable'ı değiştirerek geçiş mümkündür. Endpoint sözleşmesini önceden tanımlamak temiz bir geçiş için en iyi yoldur.
MSW ile farkı nedir?
MSW network'ü tarayıcı/test seviyesinde intercept eder; JSON Server gerçek bir HTTP sunucusudur. Mobil ve QA gibi farklı tüketicilerin de erişmesi gerekiyorsa JSON Server, sadece testler için MSW idealdir.
İlgili İçerikler
Bu konuyla bağlantılı diğer infografikler.
- ToolsFrontend
Vite Nedir? Yeni Nesil Frontend Geliştirme Aracı
Vite ile native ESM tabanlı, anında başlayan dev server ve şimşek hızında HMR. Kurulum, plugin sistemi, production build ve Webpack ile karşılaştırma.
- FrontendTools
Zod Nedir? Modern Uygulamalar için Tip-Güvenli Validation
Zod ile TypeScript tipinden runtime validation üretin. Schema tanımlama, parse, safeParse, type inference ve React Hook Form entegrasyonu.
- FrontendTools
Axios Nedir? Modern Uygulamalar için Pratik HTTP İstemcisi
Axios ile fetch'ten daha güçlü, Promise-based HTTP istekleri yapın. Interceptor, instance, hata yönetimi ve query params kullanım rehberi.
Daha fazla developer infografiği keşfedin
Yeni içerikleri kaçırmamak için ana sayfayı ziyaret edin.
Tüm infografikleri gör