import type { InferGetStaticPropsType, GetStaticProps } from 'next'
type Repo = {
name: string
stargazers_count: number
export const getStaticProps = (async (context) => {
const res = await fetch('https://api.github.com/repos/vercel/next.js')
const repo = await res.json()
return { props: { repo } }
}) satisfies GetStaticProps<{
repo: Repo
export default function Page({
repo,
}: InferGetStaticPropsType<typeof getStaticProps>) {
return repo.stargazers_count
Note that irrespective of rendering type, any props
will be passed to the page component and can be viewed on the client-side in the initial HTML. This is to allow the page to be hydrated correctly. Make sure that you don't pass any sensitive information that shouldn't be available on the client in props
.
When should I use getStaticProps?You should use getStaticProps
if:
The data required to render the page is available at build time ahead of a user’s request
The data comes from a headless CMS
The page must be pre-rendered (for SEO) and be very fast — getStaticProps
generates HTML
and JSON
files, both of which can be cached by a CDN for performance
The data can be publicly cached (not user-specific). This condition can be bypassed in certain specific situation by using a Middleware to rewrite the path.
When does getStaticProps run
getStaticProps
always runs on the server and never on the client. You can validate code written inside getStaticProps
is removed from the client-side bundle with this tool.
getStaticProps
always runs during next build
getStaticProps
runs in the background when using fallback: true
getStaticProps
is called before initial render when using fallback: blocking
getStaticProps
runs in the background when using revalidate
getStaticProps
runs on-demand in the background when using revalidate()
When combined with Incremental Static Regeneration, getStaticProps
will run in the background while the stale page is being revalidated, and the fresh page served to the browser.
getStaticProps
does not have access to the incoming request (such as query parameters or HTTP headers) as it generates static HTML. If you need access to the request for your page, consider using Middleware in addition to getStaticProps
.
Using getStaticProps to fetch data from a CMSThe following example shows how you can fetch a list of blog posts from a CMS.
pages/blog.tsx