Kuleta Data kutoka kwa API katika Next.js: Kutumia getStaticProps na getServerSideProps

Katika mchakato wa kuunda Next.js programu, kuleta data kutoka kwa API ni kipengele muhimu cha kuonyesha maudhui yanayobadilika. Makala haya yatakuongoza katika kutumia getStaticProps ili kuleta data tuli wakati wa mchakato wa kujenga na kutumia getServerSideProps kuleta data kutoka kwa API kwa kila ombi.

Kwa kutumia getStaticProps

getStaticProps ni njia iliyojengewa ndani Next.js ambayo inasaidia kuleta data tuli wakati wa mchakato wa ujenzi. Inakuruhusu kuunda kurasa tuli na data iliyoulizwa, ambayo hutolewa mapema kabla ya programu kutumwa. Hapa kuna mfano wa msingi wa kutumia getStaticProps:

export async function getStaticProps() {  
  const response = await fetch('https://api.example.com/data');  
  const data = await response.json();  
  
  return {  
    props: {  
      data,  
    },  
  };  
}  

Katika mfano ulio hapo juu, tunatumia fetch kuuliza data kutoka kwa API na kurudisha data kama props.

Kwa kutumia getServerSideProps

getServerSideProps ni njia nyingine Next.js ambayo hukuwezesha kupata data kutoka kwa API kwa kila ombi. Hii inahakikisha kwamba maudhui ni ya kisasa na yenye nguvu kila wakati. Hapa kuna mfano wa kutumia getServerSideProps:

export async function getServerSideProps() {  
  const response = await fetch('https://api.example.com/data');  
  const data = await response.json();  
  
  return {  
    props: {  
      data,  
    },  
  };  
}  

Mbinu hii getServerSideProps itauliza data kutoka kwa API kila wakati ombi linapofanywa kwa ukurasa.

Hitimisho

Katika sehemu hii, umejifunza jinsi ya kuleta data kwa ufanisi kutoka kwa API katika Next.js programu yako. Kwa kutumia getStaticProps na getServerSideProps, unaweza kuonyesha maudhui tuli na yanayobadilika kwa urahisi katika programu yako.