Rendering: Static Site Generation (SSG) | Next.js

nextjs.org · 1,214 words · saved by 1 readers

If a page uses Static Generation, the page HTML is generated at build time. That means in production, the page HTML is generated when you run next build. This HTML will then be reused on each request. It can be cached by a CDN. In Next.js, you can statically generate pages with or without data. Let's take a look at each case. By default, Next.js pre-renders pages using Static Generation without fetching data. Here's an example: Note that this page does not need to fetch any external data to be pre-rendered. In cases like this, Next.js generates a single HTML file per page during build time. Some pages require fetching external data for pre-rendering. There are two scenarios, and one or both might apply. In each case, you can use these functions that Next.js provides: Example: Your blog page might need to fetch the list of blog posts from a CMS (content management system). To fetch this data on pre-render, Next.js allows you to export an async function called getStaticProps from the sam

This page is also available as Markdown at /docs/pages/building-your-application/rendering/static-site-generation.md . For an index of Next.js Pages Router documentation , see /docs/pages/llms.txt . Copy page You are currently viewing the documentation for Pages Router. Static Site Generation (SSG) Last updated March 3, 2026 Examples Agility CMS Example ( Demo ) Builder.io Example ( Demo ) ButterCMS Example ( Demo ) Contentful Example ( Demo ) Cosmic Example ( Demo ) DatoCMS Example ( Demo ) DotCMS Example ( Demo ) Drupal Example ( Demo ) Enterspeed Example ( Demo ) GraphCMS Example ( Demo ) K

Rendering: Static Site Generation (SSG) | Next.js

related reading