Next.js 15: Arama ve Sayfalama
Bu makalede, Next.js uygulamalarınıza arama ve sayfalama işlevselliğini eklemenin etkili bir yolunu keşfedeceğiz. Özellikle Next.js 15’in sunduğu yeni özelliklerden yararlanarak uygulamanıza nasıl arama ve sayfalama özelliği kazandıracağınızı adım adım göstereceğim.
Arama İşlevselliğini Uygulama
Bir web uygulamasında, kullanıcıların veriler arasında gezinmelerini ve aradıkları bilgileri kolayca bulmalarını sağlamak çok önemlidir. Next.js 15, yerleşik bir arama işlevselliği sunmasa da, basit bir arama çubuğu ve filtreleme seçenekleri ekleyerek bu ihtiyacı karşılayabilirsiniz.
İlk adım, arama çubuğu oluşturmaktır. Bu çubuğu bir form elementi kullanarak oluşturabilir ve kullanıcının girdisini bir durum değişkenine kaydedebilirsiniz. Daha sonra, bu durum değişkenini kullanarak veri listenizi filtreleyebilirsiniz.
“`html
setSearchTerm(e.target.value)} />
“`
Yukarıdaki kod parçası, bir arama çubuğu oluşturur ve kullanıcının girdiği değeri `searchTerm` durum değişkenine kaydeder. Daha sonra bu değişkeni, veri listesini filtrelemek için kullanabilirsiniz.
Veri Filtreleme
Kullanıcının girdisini aldığınızda, veri listesini bu girişle eşleşen öğeleri göstermek için filtrelemeniz gerekir. Bunu `filter()` yöntemini kullanarak yapabilirsiniz. Örneğin, bir ürün listesini aramak için aşağıdaki kodu kullanabilirsiniz:
“`javascript
const filteredProducts = products.filter(product =>
product.name.toLowerCase().includes(searchTerm.toLowerCase())
);
“`
Bu kod, `products` dizisinde `name` özelliği `searchTerm` ile eşleşen ürünleri filtreler.
Sayfalama Uygulama
Çok sayıda veri görüntülenirken, tüm verileri aynı anda göstermek performans sorunlarına yol açabilir ve kullanıcı deneyimini olumsuz etkileyebilir. Sayfalama, büyük veri kümelerini daha küçük bölümlere ayırmanıza ve kullanıcının sadece belirli sayıda veriyi görüntülemesini sağlamanıza olanak tanır.
Next.js 15’te, sayfa değişkeni kullanarak sayfalama uygulamasını kolaylaştırabilirsiniz. Bir sayfalama bileşeni oluşturabilir ve her sayfaya ait verileri göstermek için sayfa değişkenini kullanabilirsiniz.
“`javascript
const itemsPerPage = 10;
const startIndex = (page – 1) * itemsPerPage;
const endIndex = startIndex + itemsPerPage;
const currentItems = filteredProducts.slice(startIndex, endIndex);
“`
Bu kod, sayfa değişkenini kullanarak, `filteredProducts` dizisinden `itemsPerPage` sayıda öğeyi içeren bir alt dizi oluşturur.
Sayfalama Navigasyonu
Kullanıcıların farklı sayfalara geçmelerini sağlamak için, sayfalama navigasyonunu kullanabilirsiniz. Bu navigasyon, kullanıcıların önceki veya sonraki sayfaya gitmelerini sağlayan düğmeler veya bağlantıları içerir. Bu düğmeleri, sayfa değişkenini artırarak veya azaltarak güncelleyebilirsiniz.
“`html
“`
Bu kod, önceki ve sonraki sayfalara gitmek için düğmeler oluşturur ve bunları `page` değişkenini kullanarak devre dışı bırakır.
Sonuç
Bu makalede, Next.js 15 uygulamanıza arama ve sayfalama işlevselliğini eklemeyi öğrendiniz. Bu özellikler, uygulamanızın kullanıcı deneyimini artıracak ve büyük veri kümelerini yönetmeyi kolaylaştıracaktır.
Daha fazla Next.js öğretici ve kaynak için web sitemi ziyaret edebilirsiniz: https://fatihsoysal.com
Next.js’in sunduğu diğer özelliklerle ilgili daha fazla bilgi edinmek için Next.js resmi dökümantasyonunu inceleyebilirsiniz: https://nextjs.org/docs
#Etiketler
Next.js, Arama, Sayfalama, JavaScript, Web Geliştirme, Fatih Soysal, Programlama, Tutorial, Öğretici