How do I use getStaticProps in Next.js?

How do I use getStaticProps in Next.js?

You can use getStaticProps to fetch data at build time in Next.js. It allows you to generate static pages with dynamic data.

Can you show me a simple example?

Sure! Here's a basic 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 function fetches data and returns it as props.

What happens if the data changes after build?

If the data changes after the build, the static page won't update until you rebuild your application. You can use Incremental Static Regeneration (ISR) to update static pages without a full rebuild.

How do I implement ISR?

You can implement ISR by adding a revalidate key to the return object in getStaticProps. For example:

return {
  props: { data },
  revalidate: 10, // revalidate every 10 seconds
};