{"id":3790,"date":"2024-11-13T11:45:10","date_gmt":"2024-11-13T08:45:10","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/next-js-15-arama-ve-sayfalama\/"},"modified":"2024-11-13T11:45:10","modified_gmt":"2024-11-13T08:45:10","slug":"next-js-15-arama-ve-sayfalama","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/next-js-15-arama-ve-sayfalama\/","title":{"rendered":"Next.js 15: Arama ve Sayfalama"},"content":{"rendered":"

Next.js 15: Arama ve Sayfalama<\/p>\n

Bu makalede, Next.js uygulamalar\u0131n\u0131za arama ve sayfalama i\u015flevselli\u011fini eklemenin etkili bir yolunu ke\u015ffedece\u011fiz. \u00d6zellikle Next.js 15’in sundu\u011fu yeni \u00f6zelliklerden yararlanarak uygulaman\u0131za nas\u0131l arama ve sayfalama \u00f6zelli\u011fi kazand\u0131raca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m g\u00f6sterece\u011fim.<\/p>\n

Arama \u0130\u015flevselli\u011fini Uygulama<\/h2>\n

Bir web uygulamas\u0131nda, kullan\u0131c\u0131lar\u0131n veriler aras\u0131nda gezinmelerini ve arad\u0131klar\u0131 bilgileri kolayca bulmalar\u0131n\u0131 sa\u011flamak \u00e7ok \u00f6nemlidir. Next.js 15, yerle\u015fik bir arama i\u015flevselli\u011fi sunmasa da, basit bir arama \u00e7ubu\u011fu ve filtreleme se\u00e7enekleri ekleyerek bu ihtiyac\u0131 kar\u015f\u0131layabilirsiniz.<\/p>\n

\u0130lk ad\u0131m, arama \u00e7ubu\u011fu olu\u015fturmakt\u0131r. Bu \u00e7ubu\u011fu bir form elementi kullanarak olu\u015fturabilir ve kullan\u0131c\u0131n\u0131n girdisini bir durum de\u011fi\u015fkenine kaydedebilirsiniz. Daha sonra, bu durum de\u011fi\u015fkenini kullanarak veri listenizi filtreleyebilirsiniz.<\/p>\n

“`html
\n setSearchTerm(e.target.value)} \/>
\n“`<\/p>\n

Yukar\u0131daki kod par\u00e7as\u0131, bir arama \u00e7ubu\u011fu olu\u015fturur ve kullan\u0131c\u0131n\u0131n girdi\u011fi de\u011feri `searchTerm` durum de\u011fi\u015fkenine kaydeder. Daha sonra bu de\u011fi\u015fkeni, veri listesini filtrelemek i\u00e7in kullanabilirsiniz.<\/p>\n

Veri Filtreleme<\/h2>\n

Kullan\u0131c\u0131n\u0131n girdisini ald\u0131\u011f\u0131n\u0131zda, veri listesini bu giri\u015fle e\u015fle\u015fen \u00f6\u011feleri g\u00f6stermek i\u00e7in filtrelemeniz gerekir. Bunu `filter()` y\u00f6ntemini kullanarak yapabilirsiniz. \u00d6rne\u011fin, bir \u00fcr\u00fcn listesini aramak i\u00e7in a\u015fa\u011f\u0131daki kodu kullanabilirsiniz:<\/p>\n

“`javascript
\nconst filteredProducts = products.filter(product =>
\n product.name.toLowerCase().includes(searchTerm.toLowerCase())
\n);
\n“`<\/p>\n

Bu kod, `products` dizisinde `name` \u00f6zelli\u011fi `searchTerm` ile e\u015fle\u015fen \u00fcr\u00fcnleri filtreler.<\/p>\n

Sayfalama Uygulama<\/h2>\n

\u00c7ok say\u0131da veri g\u00f6r\u00fcnt\u00fclenirken, t\u00fcm verileri ayn\u0131 anda g\u00f6stermek performans sorunlar\u0131na yol a\u00e7abilir ve kullan\u0131c\u0131 deneyimini olumsuz etkileyebilir. Sayfalama, b\u00fcy\u00fck veri k\u00fcmelerini daha k\u00fc\u00e7\u00fck b\u00f6l\u00fcmlere ay\u0131rman\u0131za ve kullan\u0131c\u0131n\u0131n sadece belirli say\u0131da veriyi g\u00f6r\u00fcnt\u00fclemesini sa\u011flaman\u0131za olanak tan\u0131r.<\/p>\n

Next.js 15’te, sayfa de\u011fi\u015fkeni kullanarak sayfalama uygulamas\u0131n\u0131 kolayla\u015ft\u0131rabilirsiniz. Bir sayfalama bile\u015feni olu\u015fturabilir ve her sayfaya ait verileri g\u00f6stermek i\u00e7in sayfa de\u011fi\u015fkenini kullanabilirsiniz.<\/p>\n

“`javascript
\nconst itemsPerPage = 10;
\nconst startIndex = (page – 1) * itemsPerPage;
\nconst endIndex = startIndex + itemsPerPage;
\nconst currentItems = filteredProducts.slice(startIndex, endIndex);
\n“`<\/p>\n

Bu kod, sayfa de\u011fi\u015fkenini kullanarak, `filteredProducts` dizisinden `itemsPerPage` say\u0131da \u00f6\u011feyi i\u00e7eren bir alt dizi olu\u015fturur.<\/p>\n

Sayfalama Navigasyonu<\/h2>\n

Kullan\u0131c\u0131lar\u0131n farkl\u0131 sayfalara ge\u00e7melerini sa\u011flamak i\u00e7in, sayfalama navigasyonunu kullanabilirsiniz. Bu navigasyon, kullan\u0131c\u0131lar\u0131n \u00f6nceki veya sonraki sayfaya gitmelerini sa\u011flayan d\u00fc\u011fmeler veya ba\u011flant\u0131lar\u0131 i\u00e7erir. Bu d\u00fc\u011fmeleri, sayfa de\u011fi\u015fkenini art\u0131rarak veya azaltarak g\u00fcncelleyebilirsiniz.<\/p>\n

“`html
\n