Next.js duomenų gavimas

Next.js turi kelis būdus gauti duomenis puslapiams. Šiame dokumente apžvelgiamas pagrindinės duomenų gavimo strategijos.

getStaticProps

getStaticProps leidžia gauti duomenis statinio generavimo metu (build time).

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: { data }, // bus perduota puslapio komponentui kaip props
  };
}

getServerSideProps

getServerSideProps vykdomas kiekvieną kartą, kai puslapis prašomas iš serverio.

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: { data }, // bus perduota puslapio komponentui kaip props
  };
}

getStaticPaths

Naudojamas su dinaminiais maršrutais ir getStaticProps statiniams puslapiams generuoti:

export async function getStaticPaths() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  const paths = posts.map((post) => ({
    params: { id: post.id },
  }));

  return {
    paths,
    fallback: false,
  };
}