Nuxt3 ile Kendi API’ınızı Oluşturun!

Nuxt, bilindiği üzere VueJS kullanan bir JavaScript kütüphanesidir. Nuxt kullanarak SEO uyumlu websiteleri yapmanız mümkün. Bu yazımızda Nuxt’un içerisinde bulunan özellikleri kullanarak kendi API’ımızı oluşturacağız, ve bunu nasıl kullanabileceğimize bakacağız.

Öncelikle buna neden gerek duyarız bunun hakkında konuşalım. Eğer elinizde dağınık halde veriler bulunuyorsa ve bunları websitenizde göstermek istiyorsanız ama veritabanı işlemleriyle uğraşmak istemiyorsanız veya sadece deneme yapmak için bu özelliği kullanabilirsiniz.

Lafı çok uzatmadan gelelim nasıl kullanacağımıza:

Yeni bir Nuxt projesi oluşturalım ve işlemlerimize başlayalım.

npx nuxi init <klasor-adi>

komutunu kullanarak bir Nuxt projesi oluşturabiliriz.

Proje oluştuktan sonra yarn veya npm i yazarak gerekli paketlerin kurulmasını sağlayalım ve yarn dev veya npm run devyazarak projemizi ayağa kaldıralım.

Eğer Nuxt’un kendi özelliklerini kullanmak istiyorsak, Nuxt’un standart olarak belirlediği dosya ve klasör isimlerini kullanmalıyız. Bu yüzden projemizin bulunduğu ana dizinde server isimli bir klasör açıyoruz ve bu klasörün altında apiisimli bir klasör daha açıyoruz.

server ve api isimlerini sabit olarak kullanmalıyız. Kendi kafamıza göre isim veremeyiz. Fakat api içerisine oluşturacağımız javascript veya typescript dosyasına istediğimiz ismi verebiliriz.

Örnek olarak users isimli bir typescript dosyası oluşturuyorum. Bu dosyayı oluşturduktan sonra projemizin son hali görseldeki gibi oldu:

(Burada javascript dosyası da oluşturabilirdik. Ben her türlü çalıştığını göstermek için typescript dosyası oluşturdum.)

Buradan sonrasının mantığını kafamıza oturtarak ilerleyelim.

Öncelikle biz bir API tasarlamak istiyoruz ve ana amacımız bu API’ya bir şekilde ulaşabilmek. Javascriptte bir dosyaya ulaşabilmek için export ifadesini kullanıyorduk. Bu yüzden biz de bir fonksiyon oluşturacağız ve export default diyerek bunu dışarıya açacağız. Kullanacağımız fonksiyon ismi Nuxt’un kendi fonksiyonu olan defineEventHandler olmak zorunda.

export default defineEventHandler(event => {
    // buraya kodlar gelecek
})

• Burada defineEventHandler ile bir event yakalayabiliyoruz, fakat bunu kullanmayacaksak event kısmını boş bırakabiliriz.

export default defineEventHandler(() => {
    // buraya kodlar gelecek
})

Bundan sonra yapmamız gereken işlem çok basit. return diyeceğiz ve döndürmek istediğimiz verilerimizi yazacağız. Ben bir dizi döndürmek istiyorum, bu yüzden aşağıdaki gibi bir yapı kullanacağım.

export default defineEventHandler(() => {
  return [
    {
      name: "Yunus Emre",
      age: 24,
    },
    {
      name: "Ahmet",
      age: 21,
    },
    {
      name: "Ayşe",
      age: 43,
    },
    {
      name: "Remzi",
      age: 12,
    },
  ];
});

Verilerimi oluşturdum. Şimdi tarayıcımızda bu verilere erişmeyi deneyelim. Hatırlayacağınız üzere server klasörü altında bir api klasörümüz, onun altında da users dosyamız vardı. O zaman tarayıcımızda şu adrese gitmeyi deneyelim:

<http://localhost:3000/api/users>

Gördüğünüz gibi API’ımıza ulaşmaya çalıştık ve verilerimizi burada görmeyi beklerken bomboş bir ekranla karşılaştık. Böyle bir durumla karşılaşırsak projemizi durdurup yeniden başlatıyoruz.

Veee işte verilerimiz karşımızda …

API’ımızı oluşturduk, fakat bunları kullanamadıktan sonra hiç bir anlamı kalmıyor. Bunları nasıl kullanabileceğimize göz atalım.

Hangi sayfamızda kullanmak istiyorsak orada işlem yapmalıyız, ben şimdilik app.vue içerisinde işlemlerimi yapacağım.

Yapacağım işlemler sırasıyla:

• ref’i import edeceğim,
• useFetch ile api’dan verimi çekeceğim,
• ve son olarak çektiğim veriyi ref kullanarak değişkene atayacağım

işte bu kadar basit. Bir de kodlara bakalım neler yapmışız.

<script setup>
import { ref } from "vue";
const { data: users } = await useFetch("/api/users");
const info = ref(users);
</script>

API klasörüm içerisinde ufak bir değişiklik yapıp hepsine birer id tanımladım:

import { nanoid } from "nanoid";
export default defineEventHandler((event) => {
  return [
    {
      name: "Yunus Emre",
      age: 24,
      id: nanoid(),
    },
    {
      name: "Ahmet",
      age: 21,
      id: nanoid(),
    },
    {
      name: "Ayşe",
      age: 43,
      id: nanoid(),
    },
    {
      name: "Remzi",
      age: 12,
      id: nanoid(),
    },
  ];
});

Ve app.vue içerisindeki template içerisinde verilerimi listeledim.

<template>
  <h1>Hello World!</h1>
  <ul v-for="user in info" :key="user.id">
    <li>{{ user.name }} - {{ user.age }}</li>
  </ul>
</template>

Ve çıktım bu şekilde oldu:

Umarım faydalı bir yazı olmuştur.