BLOG
Next js data fetch
Next.js     23.09.2021 11:42:04

Nextjs Veri Alışverişi

Next js data fetch

Nextjs'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.js

Köş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 : Blog

Diğer Nextjs ile alakalı blog yazılarımız : Nextjs