Next.js API’sı ile Arama, Sayfalama, Filtreleme, Sıralama ve Limitleme

Next.js API’sı ile Arama, Sayfalama, Filtreleme, Sıralama ve Limitleme

Next.js, güçlü sunucu tarafı yetenekleriyle bilinen popüler bir React frameworküdür. Bu yazıda, Next.js API routes’larını kullanarak verileriniz üzerinde arama, sayfalama, filtreleme, sıralama ve limitleme işlemlerini nasıl gerçekleştirebileceğinizi detaylı bir şekilde açıklayacağız. Öncelikle, temel bir API yapısı oluşturacağız. Daha sonra, adım adım ilerleyerek, her bir özelliği ekleyeceğiz.

Temel API Yapısı

Öncelikle, basit bir veri kümesiyle çalışacağız. Bu veri kümesi, örneğin, ürün bilgileri olabilir. Bu verileri bir JSON dosyasında veya bir veritabanında tutabilirsiniz. Bu örnekte, JSON dosyası kullanacağız. Aşağıdaki kod, basit bir data.json dosyasını temsil eder:

[
  { "id": 1, "name": "Ürün 1", "fiyat": 100, "kategori": "Elektronik" },
  { "id": 2, "name": "Ürün 2", "fiyat": 200, "kategori": "Giyim" },
  { "id": 3, "name": "Ürün 3", "fiyat": 150, "kategori": "Elektronik" },
  { "id": 4, "name": "Ürün 4", "fiyat": 250, "kategori": "Spor" }
]

Şimdi, bu veriyi okuyan ve geri döndüren bir Next.js API route’u oluşturalım:

// pages/api/urunler.js
import data from '../../data.json';

export default function handler(req, res) {
  res.status(200).json(data);
}

Bu basit API, data.json dosyasındaki tüm ürünleri döndürür. Ancak, henüz arama, sayfalama, filtreleme, sıralama ve limitleme özelliklerimiz yok. Bu özellikleri adım adım ekleyeceğiz.

Arama Özelliği

Kullanıcı arama sorgusu gönderdiğinde, ürün adında arama sorgusunu içeren ürünleri döndürmeliyiz. Bunun için req.query.q parametresini kullanabiliriz. Aşağıdaki kod, arama özelliğini ekler:

// pages/api/urunler.js
import data from '../../data.json';

export default function handler(req, res) {
  const searchTerm = req.query.q || '';
  const filteredData = data.filter(urun => urun.name.toLowerCase().includes(searchTerm.toLowerCase()));
  res.status(200).json(filteredData);
}

Bu kod, q parametresinde bir arama terimi varsa, ürün adlarında bu terimi içeren ürünleri filtreler ve döndürür. Büyük/küçük harf duyarlılığı önlemek için toLowerCase() fonksiyonunu kullanıyoruz.

Sayfalama Özelliği

Sayfalama özelliği, büyük veri kümelerini daha yönetilebilir parçalara ayırmak için kullanılır. req.query.page ve req.query.limit parametrelerini kullanarak sayfalama işlemini gerçekleştirebiliriz. Örneğin, page=2&limit=10 sorgusu, ikinci sayfayı, her sayfada 10 ürün olacak şekilde döndürür. Aşağıdaki kod, sayfalama özelliğini ekler:

// pages/api/urunler.js
import data from '../../data.json';

export default function handler(req, res) {
  // ... (arama kodu) ...

  const page = parseInt(req.query.page) || 1;
  const limit = parseInt(req.query.limit) || 10;
  const startIndex = (page - 1) * limit;
  const endIndex = page * limit;
  const paginatedData = filteredData.slice(startIndex, endIndex);

  res.status(200).json(paginatedData);
}

Bu kod, page ve limit parametrelerini kullanarak verileri uygun şekilde böler ve sadece belirtilen sayfadaki ürünleri döndürür.

Filtreleme Özelliği

Filtreleme, belirli kriterlere göre ürünleri filtrelemeyi sağlar. Örneğin, sadece “Elektronik” kategorisindeki ürünleri göstermek isteyebiliriz. req.query.kategori parametresini kullanarak filtreleme işlemini gerçekleştirebiliriz.

// pages/api/urunler.js
import data from '../../data.json';

export default function handler(req, res) {
  // ... (arama ve sayfalama kodu) ...

  const kategori = req.query.kategori;
  if (kategori) {
    filteredData = filteredData.filter(urun => urun.kategori === kategori);
  }

  // ... (sayfalama kodu) ...
}

Bu kod, kategori parametresi varsa, sadece belirtilen kategoriye ait ürünleri filtreler.

Sıralama Özelliği

Sıralama özelliği, ürünleri belirli bir sütuna göre sıralamayı sağlar. Örneğin, ürünleri fiyata göre sıralayabiliriz. req.query.sort parametresini kullanarak sıralama işlemini gerçekleştirebiliriz. Aşağıdaki kod, fiyata göre sıralama özelliğini ekler:

// pages/api/urunler.js
import data from '../../data.json';

export default function handler(req, res) {
  // ... (arama, sayfalama ve filtreleme kodu) ...

  const sort = req.query.sort;
  if (sort === 'fiyat_asc') {
    paginatedData.sort((a, b) => a.fiyat - b.fiyat);
  } else if (sort === 'fiyat_desc') {
    paginatedData.sort((a, b) => b.fiyat - a.fiyat);
  }

  res.status(200).json(paginatedData);
}

Bu kod, sort parametresine göre ürünleri fiyata göre artan veya azalan sırada sıralar.

Limitleme Özelliği

Limitleme, döndürülen ürün sayısını sınırlamak için kullanılır. Bu özellik, genellikle sayfalama ile birlikte kullanılır. req.query.limit parametresi zaten sayfalama özelliğinde kullanılıyor.

Sonuç

Bu makalede, Next.js API routes’larını kullanarak arama, sayfalama, filtreleme, sıralama ve limitleme özelliklerini nasıl uygulayabileceğinizi öğrendiniz. Bu özellikler, kullanıcı deneyimini önemli ölçüde iyileştirir ve büyük veri kümelerini daha verimli bir şekilde yönetmenizi sağlar. Daha gelişmiş özellikler için, bir veritabanı kullanarak daha karmaşık sorgular oluşturabilirsiniz. Daha fazla bilgi için fatihsoysal.com adresini ziyaret edebilirsiniz. Ayrıca, Next.js API Routes dökümanına da göz atabilirsiniz.

#Etiketler: Next.js, API, Arama, Sayfalama, Filtreleme, Sıralama, Limitleme, Node.js, Veritabanı, Backend, Programlama, Geliştirme