Build-time static generation
A Pages Router page has CMS data available before deployment and should be generated ahead of requests.
Next.js 16+ · Type Alias
GetStaticProps
GetStaticProps is the TypeScript type alias for a Pages Router function that supplies data for static page generation. It is a legacy Pages Router API; App Router applications use Server Components and App Router data-fetching APIs instead.
How it works
GetStaticProps is a Pages Router type alias for the function that supplies data to a statically generated page. It describes the context input and the result containing props or a redirect/not-found response, optionally with revalidation; App Router code instead fetches in Server Components.
Syntax
type GetStaticProps<Props extends { [key: string]: any } = { [key: string]: any }, Params extends ParsedUrlQuery = ParsedUrlQuery, Preview extends PreviewData = PreviewData> = (context: GetStaticPropsContext<Params, Preview>) => Promise<GetStaticPropsResult<Props>>Parameters
| Name | Type | Description |
|---|---|---|
context | GetStaticPropsContext | Context supplied by Next.js, including page-generation information such as params for dynamic Pages Router routes. |
Returns
GetStaticPropsResult<Props>: an object containing props, redirect, or notFound, optionally with revalidate.
Key points
- The alias models the function used to supply data for build-time page prerendering.
- Its result is a discriminated set of page-generation outcomes, optionally augmented with revalidation.
- Production builds invoke the function to create the initial static output.
- Dynamic Pages Router paths can invoke it during background generation when fallback is enabled.
- Choose this pattern when required data can be resolved before visitors request the page.
- The type applies to page exports; it is not a general-purpose data loader for arbitrary files.
Common mistakes
- This API belongs to the Pages Router: export it only from a page file, not from shared modules or special files such as _app.
- Because generation is not request-bound, request query parameters and HTTP headers are unavailable.
- For App Router routes, use the App Router data-fetching model rather than this Pages Router API.
Example: Static page with typed props
import type { GetStaticProps, InferGetStaticPropsType } from 'next'
type Post = { id: string; title: string }
export const getStaticProps = (async () => {
const res = await fetch('https://example.com/api/posts')
const posts: Post[] = await res.json()
return { props: { posts }, revalidate: 60 }
}) satisfies GetStaticProps<{ posts: Post[] }>
export default function Page({ posts }: InferGetStaticPropsType<typeof getStaticProps>) {
return <main>{posts.map((post) => <h2 key={post.id}>{post.title}</h2>)}</main>
}A Pages Router page fetches build-time data, exposes it as typed props, and permits regeneration after 60 seconds.
When to use it
Typed dynamic pages
A dynamic Pages Router page uses a generated path and needs typed route parameters while producing page props.
Incremental regeneration
A generated page should refresh after a configured interval without rebuilding the entire site.
Interview questions
QWhat does GetStaticProps describe?
GetStaticProps is a TypeScript type alias that describes a Pages Router data function. The function runs during static generation and returns an object with props, redirect, or notFound, with optional revalidate.
Follow-up: How would this change in the App Router? Fetch data in Server Components and use the App Router's caching and revalidation APIs instead of exporting getStaticProps.
QHow do you use this type safely with page props?
It is used with a page-level getStaticProps export to type its context and return value. The returned props become inputs to the page during prerendering.
Follow-up: How can the page component infer the returned prop shape? Use Next.js's InferGetStaticPropsType utility with typeof getStaticProps.
QWhat can a getStaticProps result contain?
The return type permits props, redirect, or notFound, and can include revalidate. Revalidation allows a generated page to be regenerated after a specified interval.
Follow-up: What limitation remains even when revalidation is configured? The function still does not receive the incoming request, so request-specific data cannot drive generation.
Related
GetStaticPropsContextGetStaticPropsResultInferGetStaticPropsTypegetStaticPropsgetStaticPathsgenerateStaticParamsServer Components