Next.js › Pages Router Data Fetching (getStaticProps, getServerSideProps & getStaticPaths)

What does getStaticProps do in the Next.js Pages Router?

Beginner

Answer

getStaticProps is a special function you export from a page file that runs at build time, fetching data and passing it to your page component as props, allowing Next.js to generate a fully static HTML page ahead of time for fast loading and better SEO.

// pages/blog.js
export async function getStaticProps() {
  const posts = await getPosts();
  return { props: { posts } };
}

export default function Blog({ posts }) {
  return <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>;
}

Real-world example A company blog uses getStaticProps to fetch all its articles at build time, generating a fast, fully static blog listing page that loads instantly for every visitor.

Common follow-ups: When does getStaticProps actually run, during build or on each request?;How do you add a revalidate option to getStaticProps?

Rendering (SSR/SSG/ISR);Caching