Next.js Static Site Generation (SSG) Explained — Pre-Built Pages

In this tutorial, you will learn about Next.js Static Site Generation (SSG) Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

Next.js static site generation (SSG) generates HTML at build time, producing fast, SEO-friendly pages that can be served from CDN without server processing.

What You'll Learn

• getStaticProps for build-time data
• getStaticPaths for dynamic routes
• Incremental Static Regeneration (ISR)
• Fallback behavior
• SSG vs SSR vs ISR

Why It Matters

SSG produces the fastest possible pages since HTML is pre-built and cacheable at the edge. It is ideal for blogs, documentation, marketing pages, and e-commerce product listings.

// pages/posts/[slug].jsx (Pages Router)
export default function Post({ post }) {
  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
      <time>{post.date}</time>
    </article>
  );
}

export async function getStaticPaths() {
  const posts = await fetch("https://api.example.com/posts").then(r => r.json());
  const paths = posts.map(post => ({ params: { slug: post.slug } }));

  return { paths, fallback: "blocking" };
}

export async function getStaticProps({ params }) {
  const post = await fetch(`https://api.example.com/posts/${params.slug}`)
    .then(r => r.json());

  return {
    props: { post },
    revalidate: 3600,
  };
}

Expected output: All blog posts are pre-built at build time. New posts (not in getStaticPaths) are generated on first request with blocking fallback and revalidated hourly.