getStaticProps is a Pages Router data fetching method that runs at build time to generate static pages with pre-fetched data
getStaticProps is a special async function used in the Next.js Pages Router (pages directory) to fetch data at build time and pre-render pages as static HTML. It runs on the server-side during the build process, never on the client, and the resulting static files can be cached and served instantly via CDN. This method is essential for Static Site Generation (SSG), enabling you to create fast, SEO-friendly pages with data from external sources like CMS, databases, or file systems. It's important to note that getStaticProps is not available in the App Router - it has been replaced by Server Components and generateStaticParams.
Build-time Execution: Runs during
next buildto generate static HTML and JSON files that are served to users .Server-side Only: Code inside getStaticProps is never exposed to the client; you can safely write server-side logic like database queries .
Static Generation: Creates static pages that can be cached on a CDN for optimal performance and reduced server load .
Incremental Static Regeneration (ISR): By adding the
revalidateproperty, you can update static content without rebuilding the entire site .Limited to Page Files: Can only be exported from files inside the
pagesfolder, not from components or other files .
getStaticProps is ideal for pages where the data is publicly available, can be fetched ahead of time, and doesn't change frequently or can be updated via ISR. Common use cases include blog posts, marketing pages, documentation sites, e-commerce product pages, and content from headless CMS platforms. It's not suitable for pages that require user-specific data or frequently changing content, where you'd want client-side fetching or server-side rendering with getServerSideProps instead .
getStaticProps → Server Component with generateStaticParams: In the App Router, you simply fetch data directly in a Server Component, and use
generateStaticParamsfor dynamic routes .getStaticPaths → generateStaticParams: The App Router version that returns an array of params for static generation .
revalidate → fetch options or segment config: ISR is configured via
next: { revalidate }in fetch calls orexport const revalidatein page files .The App Router approach is more intuitive as you don't need separate data-fetching functions - you just write async Server Components .