How does Static Site Generation work in Next.js?

// Automatically static if no dynamic data
export default function About() {
  return <h1>About Us</h1>;
}

// app/blog/[slug]/page.tsx
export async function generateStaticParams() {
  const posts = await getPosts();

  return posts.map((post) => ({
    slug: post.slug,
  }));
}

export default async function BlogPost({ params }) {
  const post = await getPost(params.slug);
  return <article>{post.content}</article>;
}

// Generate some at build, rest on-demand
export async function generateStaticParams() {
  const posts = await getTopPosts(10);
  return posts.map((post) => ({ slug: post.slug }));
}

// Pages not generated at build will be generated on first request
export const dynamicParams = true; // default

// Or disable to return 404 for non-generated paths
export const dynamicParams = false;

// app/api/revalidate/route.ts
import { revalidatePath, revalidateTag } from 'next/cache';

export async function POST(request: Request) {
  const { path, tag } = await request.json();

  if (path) revalidatePath(path);
  if (tag) revalidateTag(tag);

  return Response.json({ revalidated: true });
}