Bir uygulama geliştirme sürecinde Next.js API'lerden veri almak, dinamik içeriğin görüntülenmesi açısından çok önemli bir husustur. getStaticProps
Bu makale, derleme işlemi sırasında statik verileri almak için kullanma ve getServerSideProps
her istekte API'lerden veri almak için kullanma konusunda size yol gösterecektir .
getStaticProps'u kullanma
getStaticProps
Next.js derleme işlemi sırasında statik verilerin alınmasını destekleyen yerleşik bir yöntemdir. Uygulama dağıtılmadan önce önceden oluşturulan, sorgulanan verilerle statik sayfalar oluşturmanıza olanak tanır. İşte kullanımın temel bir örneği getStaticProps
:
export async function getStaticProps() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return {
props: {
data,
},
};
}
Yukarıdaki örnekte, fetch
bir API'den veri sorgulamak ve verileri destek olarak döndürmek için kullanıyoruz.
getServerSideProps'u kullanma
getServerSideProps
Next.js her istekte API'lerden veri almanızı sağlayan başka bir yöntemdir. Bu, içeriğin her zaman güncel ve dinamik olmasını sağlar. İşte kullanımına bir örnek getServerSideProps
:
export async function getServerSideProps() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return {
props: {
data,
},
};
}
Yöntem, getServerSideProps
sayfaya her istek yapıldığında API'den gelen verileri sorgulayacaktır.
Çözüm
Bu bölümde, uygulamanızdaki API'lerden verimli bir şekilde nasıl veri çekeceğinizi öğrendiniz Next.js. getStaticProps
ve kullanarak getServerSideProps
uygulamanızda hem statik hem de dinamik içeriği esnek bir şekilde görüntüleyebilirsiniz.