Nextjs Veri Alışverişi
Next js data fetchNextjs'de kendi databasemizde çalışmak için kendi apilerimizi yazmış olmamız gerekiyor, ancak biz hazır bir api ile çalışacağımızdan dolayı buna gerek yok. Öncelikle apimize bağlantımızı kuralım.
Verilerimizi getireceğimiz yer öncelikle kullanıcıları listeleyeceğimiz yer olduğundan dolayı /pages/users/index.js üzerinde api bağlantısını kuralım
Burada getStaticProps diyerek verimizi alacağımız fonksiyonu oluşturduk daha sonra burada res adında bir değişken oluşturduk ve bu değişkene fetch ile veri çektik, daha sonra users adında bir değişken oluşturduk, bu değişkene res değişkenimizin json'a çevirilmiş halini atadık, ve en sonunda return ile props kullanarak users' idöndürdük, ve bu users'i de Users fonksiyonumuzda yani bize görüntü verecek kısımda aldık böylece artık veriyi istediğimiz gibi kullanabiliriz
map işlemi ile users'i dönerek testlerimize başlayalım
Bu şekilde apiden aldığımız verileri ekrana bastırdık şimdi bu kullanıcıların detay sayfalarını oluşturalım
Detay Sayfalarının Oluşturulması
/pages/users/[user]/index.jsKöşeli parantez ile ( [...] ) yazılan sayfalar sabit olmayıp değişebilen anlamına gelir yani detay sayfasının dosyasını köşeli parantez ile oluşturmamız gerekiyor
Öncelikle bize url'den hangi kullanıcının geldiğini öğrenmek için bir sorgu yazmamız gerekiyor ancak bundan önce bizim kullanıcıları listelediğimiz yerde tıkladığımız kullanıcının detay sayfasına gitmemiz gerekiyor, bunun için linklendirmeyi yapalım.
/pages/users/index.js
Detay sayfası kodlamasına geçelim...
Gelen kullanıcıyı almanın en kolay yolu router kullanmaktır, biz gelen url ile slugify'den geçirilmiş kullanıcı adı eşleşiyorsa detay gelmesini sağlayacağız...
Bu şekilde veriyi işleyerek, veri görüntüleme ve veri detay sayfası yaptık.
Diğer blog yazılarımız :
BlogDiğer Nextjs ile alakalı blog yazılarımız :
Nextjs
