How can I use getStaticProps in Next.js for advanced data fetching?

How can I use getStaticProps in Next.js for advanced data fetching?

You can use getStaticProps to fetch data at build time, allowing you to pre-render pages with dynamic content. What specific use case do you have in mind?

I want to fetch data from an API and pass it to my page component.

You can do this by defining getStaticProps in your page component. Inside it, you can fetch data from your API and return it as props. Would you like a code example?

Yes, please provide a code example.

Sure! Here's a simple example:

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

  return {
    props: { data }, // will be passed to the page component as props
  };
}

This will fetch data at build time and pass it to your component.