Strapi v5 CMS Integration, Webhooks, and Terminal-Free Auto-Sync

1. Why are Next.js 16 routes Force-Cached?

In Next.js 16 App Router, all fetch requests are aggressively cached by default (Force-Cache) to ensure millisecond page loads. To invalidate and clear the cache when content is updated in Strapi or Medusa, an On-Demand Cache Revalidation architecture is used.

2. Step-by-Step Guide to Configuring Webhooks in the Strapi CMS Panel

So that saving or publishing a page in Strapi immediately clears the frontend cache without restarting the server:

1. Log into the Strapi panel and navigate to Settings > Webhooks.
2. Click the Create new Webhook button.
3. Name: Choose a custom name, such as Next.js Revalidation Webhook.
4. URL: Enter the address http://storefront:3000/api/revalidate (within the internal Docker network) or https://yourdomain.com/api/revalidate.
5. Events: Check the Entry events (create, update, delete, publish, and unpublish).

• Request Authenticity Verification: Receiving the secret from the dedicated x-strapi-secret header or query parameter.
• Selective Cache Management: Clearing the cache tags corresponding to the Strapi model (e.g., strapi-homepage).

import crypto from "node:crypto"
import { revalidateTag } from "next/cache"
import { NextRequest, NextResponse } from "next/server"
 
function isValidSecret(providedSecret: string | null): boolean {
  if (!providedSecret || !process.env.REVALIDATE_SECRET) return false
  const actual = new Uint8Array(crypto.createHash("sha256").update(providedSecret).digest())
  const expected = new Uint8Array(crypto.createHash("sha256").update(process.env.REVALIDATE_SECRET).digest())
  return crypto.timingSafeEqual(actual, expected)
}
 
export async function POST(request: NextRequest) {
  const secret = request.headers.get("x-strapi-secret") || request.nextUrl.searchParams.get("secret")
 
  if (!isValidSecret(secret)) {
    return NextResponse.json({ message: "Invalid secret" }, { status: 401 })
  }
 
  const body = await request.json()
  
  if (body.model) {
    revalidateTag(`strapi-${body.model}`)
  }
 
  return NextResponse.json({ revalidated: true, now: Date.now() })
}

3. Automatic Product Cache Revalidation from Medusa

When a product is edited in the Medusa panel, the corresponding Subscriber or Workflow processes the product.updated event and sends an HTTP request to `/api/revalidate` to expire the products and product-[id] cache tags.

4. Storefront Management & Remote Style Sync in Strapi

Strapi includes a custom Storefront Management administration page built with the Strapi Design System. From this page, content managers and developers can select any block component, specify a style (or sync all styles), view pending queued updates, and trigger automated builds via GitHub Actions dispatch without needing SSH or server access.

# Trigger component style sync via Strapi Admin API:
POST /api/storefront/sync-component
{
  "componentName": "home/components/ProductShowcase",
  "style": "style-2",
  "action": "add",
  "autoDeploy": false
}
 
# Trigger batch production build to GitHub Actions:
POST /api/storefront/build

Changes are queued in .sync-history.json, allowing multiple changes to be batched together before triggering the production build action.