Next.js 14: Dynamic OG Image not Refreshing on revalidatePath of route segment

[ODreelist]

Description

We're facing an issue with dynamic open graph (OG) image generation in a Next.js 14 (14.1.0) app (deployed on Vercel, production deployment). The route group containing the opengraph-image.tsx file is configured with dynamic: "force-static" and revalidate: 60, ensuring its content revalidates every 60 seconds. However, the OG image content itself is not dynamically refreshing as expected, despite other route segment dynamic content updating as anticipated. We call revalidatePath for the route group (segment) and it successfully revalidates the page content, including the name change reflected in page.tsx, but the OG image remains unchanged.

Expected Behavior:

1. Data changes and Revalidation:

When data used for OG image generation changes, the revalidatePath function is triggered for the route segment containing opengraph-image.tsx.

2. OG Image Regeneration:

Upon successful revalidation, the opengraph-image.tsx file should be re-executed, triggering the regeneration of the OG image URL based on the updated data.

3. Updated OG Image URL:

Subsequent requests for the OG image URL should receive the newly generated URL reflecting the latest data.

4. Consistency with Other Pages:

This behavior should be consistent with how other pages (e.g., page.tsx) in the same route segment revalidate and update their content after revalidatePath is called.

Current Behavior:

When changes are made to the data used for the OG image generation, the updated data appears correctly on the corresponding pages (the x-cache header for the page shows "REVALIDATED," indicating successful revalidation). However, the OG image url remains the same, it's content remains static and it doesn't reflect the updated data.

Code Snippets:

Route Group Settings:

export const dynamic = "force-static";
export const revalidate = 60;

opengraph-image.tsx:

This file exports a function that returns a new ImageResponse from the next/og package.

// Inside opengraph-image.tsx
import { ImageResponse } from 'next/og';

export default async function OGImage() {
  // ... your logic to generate the OG image dynamically
  return new ImageResponse(...);
}

Dynamic OG Image Fetch Call:

const { data } = await fetch(SERVER_URI, {
  body: JSON.stringify({ query: orgOGImageQuery }),
  cache: "no-cache",
  headers: { "Content-Type": "application/json" },
  method: "POST",
  next: { revalidate: 0 },
});

Additional Information:

We've tried setting cache: "no-cache" for the fetch call, but it hasn't resolved the issue.
We've tried calling headers() directly in the opengraph-image.tsx file to force dynamic behvaior, no success.
We even removed the force-static on the route segment and used force-dynamic instead at the segment, no change.
We hail mary tried calling revalidate on route directly revalidatePath("/(example)/(group)/[name]/opengraph-image"); to no avail.

In summary the only time the og image seems to be generated is once per build, beyond that it remains cached until a rebuild and it will not change even if the dynamic source data changes.

Request:

Please advise on how to configure Next 14 to achieve dynamic refreshing of the OG image content without requiring a full redeployment.

Additional Request:

While I understand the importance of minimal reproducible examples (MREs) for troubleshooting, I'm facing a situation where creating an MRE in a sandbox environment seems extremely difficult.

Here's the issue:

I'm working with a Next.js 14 application deployed on Vercel that uses dynamic open graph (OG) image generation. While other pages within the same route group successfully revalidate their content using revalidatePath, the OG image generated by opengraph-image.tsx remains static despite data changes and successful revalidation.

Therefore, I'm seeking guidance from the Next.js team on how to best report and address this issue given the current limitations in creating a sandbox environment that accurately replicates the complex interactions between server-side rendering, dynamic data fetching, and Vercel deployment.

I'm eager to collaborate and find a solution to ensure dynamic OG image updates in my application.

[eli-front]

Did you find a fix?