Hente data fra APIer i Next.js: Bruke getStaticProps og getServerSideProps

I prosessen med å utvikle en Next.js applikasjon er henting av data fra APIer et avgjørende aspekt for å vise dynamisk innhold. Denne artikkelen vil veilede deg gjennom å bruke getStaticProps for å hente statiske data under byggeprosessen og bruke getServerSideProps for å hente data fra APIer på hver forespørsel.

Bruker getStaticProps

getStaticProps er en innebygd metode Next.js som støtter henting av statiske data under byggeprosessen. Den lar deg lage statiske sider med forespurte data, som er forhåndsgjengitt før applikasjonen distribueres. Her er et grunnleggende eksempel på bruk getStaticProps:

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

I eksemplet ovenfor bruker vi fetch å spørre etter data fra en API og returnere dataene som rekvisitter.

Bruker getServerSideProps

getServerSideProps er en annen metode Next.js som lar deg hente data fra APIer på hver forespørsel. Dette sikrer at innholdet alltid er oppdatert og dynamisk. Her er et eksempel på bruk getServerSideProps:

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

Metoden getServerSideProps vil spørre etter data fra API hver gang en forespørsel sendes til siden.

Konklusjon

I denne delen har du lært hvordan du effektivt henter data fra APIer i Next.js applikasjonen din. Ved å bruke getStaticProps og getServerSideProps kan du vise både statisk og dynamisk innhold fleksibelt i applikasjonen din.