Next.js Static Site Generation: Build Blazing-Fast Websites

What Is Static Site Generation?

Static Site Generation (SSG) pre-renders pages to HTML at build time. The generated HTML files are served directly from a CDN with no server processing required — making them the fastest possible delivery mechanism for web content. Next.js supports SSG natively, and sites like blogs, documentation, marketing pages, and e-commerce product catalogs are perfect candidates for SSG.

SSG in Next.js App Router

In the App Router, pages with no dynamic data are automatically statically generated. Pages that use fetch with cache: 'force-cache' or a static revalidate value are also statically generated. The generateStaticParams function tells Next.js which dynamic route parameters to pre-render at build time — for example, returning all blog post slugs from your database so each post page is built as static HTML.

generateStaticParams for Dynamic Routes

Export an async generateStaticParams function from a dynamic route page to pre-render all known instances. Fetch your list of slugs, IDs, or any parameter values from your database or CMS. Return an array of objects matching your dynamic segment names. Next.js will generate one HTML file per parameter combination at build time. Set dynamicParams: false to return a 404 for any params not returned by generateStaticParams.

Incremental Static Regeneration (ISR)

ISR extends SSG with background revalidation. Add revalidate: 3600 to your fetch calls (or export it as a page constant) to tell Next.js to regenerate the page at most once per hour. The first request after the revalidation period triggers a background regeneration — subsequent requests get the fresh page. This gives you the performance of static with the freshness of server rendering.

On-Demand Revalidation

Time-based ISR is not ideal when you need instant updates after a content change. On-demand revalidation lets you trigger cache invalidation from a webhook. When a blog post is published in your CMS, the CMS sends a webhook to your Next.js API route, which calls revalidatePath('/blog/my-post') or revalidateTag('blog') to immediately invalidate the cached pages. The next request generates a fresh page.

Deploying Static Next.js Sites

For fully static Next.js sites, use next build with output: 'export' in next.config.js to generate a plain HTML/CSS/JS output folder. Deploy this to any static host: Vercel, Netlify, AWS S3 + CloudFront, or GitHub Pages. For sites using ISR or Server Components, deploy to Vercel or any Node.js hosting that supports Next.js. CDN caching is handled automatically by Vercel's edge network.