Implement ISR with On-Demand Revalidation

// app/blog/[slug]/page.tsx
export const revalidate = 3600; // Revalidate every hour

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

export async function generateStaticParams() {
  const posts = await getAllPosts();
  return posts.map((post) => ({ slug: post.slug }));
}

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

export async function POST(request: NextRequest) {
  const secret = request.headers.get('x-revalidation-secret');
  if (secret !== process.env.REVALIDATION_SECRET) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
  }

  const { path, tag } = await request.json();

  if (tag) {
    revalidateTag(tag);
    return NextResponse.json({ revalidated: true, tag });
  }

  if (path) {
    revalidatePath(path);
    return NextResponse.json({ revalidated: true, path });
  }

  return NextResponse.json({ error: 'Missing path or tag' }, { status: 400 });
}

// lib/api.ts
export async function getPost(slug: string) {
  const res = await fetch(`${API_URL}/posts/${slug}`, {
    next: {
      tags: ['posts', `post-${slug}`],
      revalidate: 3600,
    },
  });
  return res.json();
}

// When a post is updated, revalidate by tag:
// POST /api/revalidate { "tag": "post-my-article" }

// app/api/cms-webhook/route.ts
import { revalidateTag } from 'next/cache';

export async function POST(request: NextRequest) {
  const payload = await request.json();

  // Sanity CMS webhook
  if (payload._type === 'post') {
    revalidateTag(`post-${payload.slug.current}`);
    revalidateTag('posts'); // Revalidate listing pages too
  }

  return NextResponse.json({ received: true });
}