Next.js’de Sunucu Taraflı JSON Veri Alma İşlemleri

Geliştiriciler projelerinde test ve prototipleme aşamaları için kullanabilecekleri ücretsiz sahte bir API’ye diğer bir deyişle örnek verilere ihtiyaç duyarlar. Bu veri kaynaklarına REST Countries ya da JSONPlaceholder’ı örnek olarak verebilir, böylece gerçek bir sunucuya bağlanmadan uygulamalarımızı test etmek ve geliştirmek için bu fake API servislerinden faydalanabiliriz.

Ben de bu yazımda Next.js’de sunucu tarafından JSON verilerini çekip kendi projemde test kullanımı yapabilmek için JSONplaceholder’ın herkes için erişime sunduğu REST API’sini kullanacağım.

Next.js projesi oluşturma

Terminalime npx create-next-app@latest yazıp Next.js’in son sürümünü kullanan bir uygulama oluşturarak başlıyorum. Default olarak gelen page.js sayfamdaki fazlalıkları silerek temiz bir sayfa düzeni elde ediyorum ve sayfamın son hali aşağıdaki şekilde güncellenmiş oluyor.

const Page = () => {
  return (
    <>
      <h1>Merhaba</h1>
    </>
  );
};

export default Page;

Data fetching işlemleri

Ardından fetchData isimli asenkron olan bir arrow function tanımlayarak fetch() metoduyla JSONplaceholder’ın websitesindeki https://jsonplaceholder.typicode.com/users isimli URL’den veriyi çekerek res isimli tanımladığım yeni bir değişkene atıyorum.

fetch() metodundan dönen Response nesnesi okunabilir bir formatta değildir. Bu nedenle, veriyi kullanmak veya manipüle etmek için Response(res) nesnesini işlememiz gerekiyor. Dolayısıyla fetch metodundan dönen res nesnesini json() metodu aracılığıyla işleyerek kullanılabilir bir JSON formatı elde ediyoruz.

const fetchData = async () => {
  const res = await fetch("https://jsonplaceholder.typicode.com/users");
  return res.json();
};

const Page = () => {
  return (
    <>
      <h1>Merhaba</h1>
    </>
  );
};

export default Page;

URL’ini kullanarak aldığım veriler artık res değişkenimde JSON formatında tutuluyor. Ardından Page isimli fonksiyonun içerisinde tekrardan data1 isminde yeni bir değişken tanımlayıp await metodunu kullanarak yukarıdaki ilk fetch ederken tanımlamış olduğumuz fonksiyonu çağırıyoruz. Buradaki Page isimli fonksiyon asenkron olmak zorundadır.

const fetchData = async () => {
  const res = await fetch("https://jsonplaceholder.typicode.com/users");
  return res.json();
};

const Page = async () => {
  const data1 = await fetchData();
  
  return (
    <>
      <h1>Merhaba</h1>
    </>
  );
};

export default Page;

Son olarak bu verileri kullanabilmek için h1 etiketinin altında yeni bir etiket oluşturarak almak istediğim veriyi indeks numarası ve key parametrelerini girerek ekranıma yazdırmış oluyorum.

const fetchData = async () => {
  const res = await fetch("https://jsonplaceholder.typicode.com/users");
  return res.json();
};

const Page = async () => {
  const data1 = await fetchData();

  return (
    <>
      <h1>Merhaba</h1>
      <div>{data1[0].name}</div>
      <div>{data1[0].email}</div>
    </>
  );
};

export default Page;

Yani ekranımda görmeyi beklediğim değer data1 isimli değişkenin sıfırıncı indeksindeki name ve email parametrelerinin değerleri olan “Leanne Graham” ve “Sincere@april.biz” oluyor.

Çoklu veri alma işlemi

Eğer birden fazla veriyi aynı anda kullanmak istersek aşağıdaki yöntemi uyguladığımızda her değişkenin bir await işlemi olacağından, fonksiyonumuz en üstteki verinin getirme işlemini yapmadan alttaki veriye geçemeyeceği için sayfamızda gecikmelere sebep olacaktır.

Özetle fetchData2 isminde yeni bir asenkron fonksiyon oluşturduk ve almak istediğimiz veriyi fetch ettik. Ardından page fonksiyonumuzun içerisinde yeni bir değişken tanımlayıp verimizi tanımladığımız yeni değişkene atadık.

const fetchData1 = async () => {
  const res = await fetch("https://jsonplaceholder.typicode.com/users");
  return res.json();
};

const fetchData2 = async () => {
  const res = await fetch("https://jsonplaceholder.typicode.com/comments");
  return res.json();
};

const Page = async () => {
  const data1 = await fetchData1();
  const data2 = await fetchData2();
  
  return (
    <>
      <h1>Merhaba</h1>
      <div>{data1[0].name}</div>
      <div>{data2[0].email}</div>
    </>
  );
};

export default Page;

Dolayısıyla bu ve benzeri gecikmelerin önüne geçebilmek için data1 ve data2 değişkenlerimizdeki await anahtar kelimelerini kaldırıyorum. Ardından resultData isminde yeni bir değişken tanımlıyorum ve bu değişken await olacak şekilde bir Promise içeriyor. data1 ve data2 isimli değişkenlerden de await anahtar kelimelerini kaldırdığım için bu değişkenler de bize zaten bir promise olarak dönmüş oluyor.

Son olarak data1 ve data2 isimli değişkenlerimizdeki dönen Promise’leri Promise.all metoduyla çözümleyip kullanabiliyor, böylece çoklu veri almalarda gecikmelerin de önüne geçmiş oluyoruz.

const fetchData1 = async () => {
  const res = await fetch("https://jsonplaceholder.typicode.com/users");
  return res.json();
};

const fetchData2 = async () => {
  const res = await fetch("https://jsonplaceholder.typicode.com/comments");
  return res.json();
};

const Page = async () => {
  const data1 = fetchData1();
  const data2 = fetchData2();
  
  const resultData = await Promise.all([
   data1,
   data2
  ])
  
  return (
    <>
      <h1>Merhaba</h1>
      <div>{resultData[0][0].name}</div>
      <div>{resultData[1][0].email}</div>
    </>
  );
};

export default Page;

Umarım istifade edebileceğiniz faydalı bir yazı olmuştur. Eksik veya hatalı olduğunu düşündüğünüz kısımlar olursa lütfen yorumlarda belirtmekten çekinmeyin.

💬 Aşağıdaki linkler üzerinden bana ulaşabilirsiniz. 👇

• Twitter
• Linkedln

Bir sonraki yazıda görüşmek üzere! 🖐