Conversation
…ndlers The /og/* routes rendered via next/og's ImageResponse worked on Node/Vercel but failed on Cloudflare — @opennextjs/cloudflare serves force-static route handler bodies through an incremental cache backend, and with no backend configured the worker fell through to running the handler at request time. The handler's readFileSync() calls for fonts and brand PNGs then crashed (Workers have no filesystem), returning 500 on every OG URL. Switch to the same pattern as the welcome repo: a Node script walks the content markdown at build time, renders one PNG per page via satori + @resvg/resvg-js, and writes into public/og/. Next then serves them as plain static assets via the edge CDN — no worker execution per share, no ISR cache plumbing, no R2 dependency. The cream card design (wordmark top-left, green bush top-right, eyebrow + title + description bottom-left) is ported from the deleted route handler into scripts/og/card.mjs. Title font auto-shrinks for long headlines. Metadata in page.tsx now points at /og/.../<slug>.png. CF build command needs a one-line update to run prebuild steps explicitly, since opennextjs-cloudflare invokes next build directly and bypasses the npm prebuild hook. New command: pnpm install && pnpm run build:pre && pnpm exec opennextjs-cloudflare build. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
docs-preview | 304beb7 | Commit Preview URL Branch Preview URL |
Apr 22 2026, 10:51 PM |
This was referenced May 13, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
The
/og/*routes usingnext/og'sImageResponseworked on Vercel but failed on Cloudflare —@opennextjs/cloudflareservesforce-staticroute-handler bodies through an incremental cache adapter, and our config has no backend wired up, so the worker fell through to executing the handler at request time. The handler'sreadFileSync()calls for fonts + brand PNGs then crashed (Workers have no filesystem), returning 500 on every OG URL onpreview.happyhq.com.Switches to the same pattern as the welcome repo: a Node script walks the content markdown at build time, renders PNGs via
satori+@resvg/resvg-js, and writes intopublic/og/. Next serves them as plain static assets via the edge CDN — no worker execution per share, no ISR cache plumbing, no R2 dependency.Changes
scripts/generate-og.mjs(walks docs + changelog, renders 39 PNGs),scripts/og/card.mjs(cream card, ported from the deleted route handler), fonts moved fromsrc/app/og/_fonts/→scripts/og/src/app/og/*/route.tsxfiles +src/app/og/_lib/page.tsxmetadata in docs + changelog now references/og/.../<slug>.pngprebuildnow runs a newbuild:prescript (content manifest + OG generator)public/og/is gitignored (build output)Test plan
pnpm buildpasses; 39 PNGs generated underpublic/og/pnpm startserves/og/docs.png,/og/docs/start-here/install.png,/og/docs/concepts/chat.png,/og/changelog.png,/og/changelog/2026-04-19-multi-surface.png→ all 200<meta property="og:image">points at/og/.../<slug>.png🤖 Generated with Claude Code