If you export a function called getStaticProps
(Static Site Generation) from a page, Next.js will pre-render this page at build time using the props returned by getStaticProps
.
export async function getStaticProps(context) {
return {
props: {}, // will be passed to the page component as props
}
}
You should use getStaticProps
if:
getStaticProps
generates HTML
and JSON
files, both of which can be cached by a CDN for performancegetStaticProps
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 revalidate
getStaticProps
runs on-demand in the background when using unstable_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
.
The following example shows how you can fetch a list of blog posts from a CMS.
// posts will be populated at build time by getStaticProps()
function Blog({ posts }) {
return (
<ul>
{posts.map((post) => (
<li>{post.title}</li>
))}
</ul>
)
}
// This function gets called at build time on server-side.
// It won't be called on client-side, so you can even do
// direct database queries.
export async function getStaticProps() {
// Call an external API endpoint to get posts.
// You can use any data fetching library
const res = await fetch('https://.../posts')
const posts = await res.json()
// By returning { props: { posts } }, the Blog component
// will receive `posts` as a prop at build time
return {
props: {
posts,
},
}
}
export default Blog
The getStaticProps
API reference covers all parameters and props that can be used with getStaticProps
.
As getStaticProps
runs only on the server-side, it will never run on the client-side. It won’t even be included in the JS bundle for the browser, so you can write direct database queries without them being sent to browsers.
This means that instead of fetching an API route from getStaticProps
(that itself fetches data from an external source), you can write the server-side code directly in getStaticProps
.
Take the following example. An API route is used to fetch some data from a CMS. That API route is then called directly from getStaticProps
. This produces an additional call, reducing performance. Instead, the logic for fetching the data from the CMS can be shared by using a lib/
directory. Then it can be shared with getStaticProps
.
// lib/fetch-posts.js
// The following function is shared
// with getStaticProps and API routes
// from a `lib/` directory
export async function loadPosts() {
// Call an external API endpoint to get posts
const res = await fetch('https://.../posts/')
const data = await res.json()
return data
}
// pages/blog.js
import { loadPosts } from '../lib/load-posts'
// This function runs only on the server side
export async function getStaticProps() {
// Instead of fetching your `/api` route you can call the same
// function directly in `getStaticProps`
const posts = await loadPosts()
// Props returned will be passed to the page component
return { props: { posts } }
}
Alternatively, if you are not using API routes to fetch data, then the fetch()
API can be used directly in getStaticProps
to fetch data.
To verify what Next.js eliminates from the client-side bundle, you can use the next-code-elimination tool.
When a page with getStaticProps
is pre-rendered at build time, in addition to the page HTML file, Next.js generates a JSON file holding the result of running getStaticProps
.
This JSON file will be used in client-side routing through next/link
or next/router
. When you navigate to a page that’s pre-rendered using getStaticProps
, Next.js fetches this JSON file (pre-computed at build time) and uses it as the props for the page component. This means that client-side page transitions will not call getStaticProps
as only the exported JSON is used.
When using Incremental Static Generation, getStaticProps
will be executed in the background to generate the JSON needed for client-side navigation. You may see this in the form of multiple requests being made for the same page, however, this is intended and has no impact on end-user performance.
getStaticProps
can only be exported from a page. You cannot export it from non-page files.
One of the reasons for this restriction is that React needs to have all the required data before the page is rendered.
Also, you must use export getStaticProps
as a standalone function — it will not work if you add getStaticProps
as a property of the page component.
In development (next dev
), getStaticProps
will be called on every request.
You can temporarily bypass static generation and render the page at request time instead of build time using Preview Mode. For example, you might be using a headless CMS and want to preview drafts before they're published.
For more information on what to do next, we recommend the following sections: