PR #4202 introduced dynamic OG via app/opengraph-image.tsx + app/twitter-image.tsx
using next/og ImageResponse. Build succeeds, but deploy to Cloudflare Workers
fails:
✘ [ERROR] Unable to extract npm package name from
.open-next/server-functions/default/node_modules/next/dist/compiled/
@vercel/og/yoga.wasm?module
[plugin wrangler-module-collector]
##[error]The process '/home/runner/.bun/bin/bunx' failed with exit code 1
Root cause: wrangler-module-collector can't resolve @vercel/og's bundled
yoga.wasm import from the OpenNext server-functions output. Known regression
in @opennextjs/cloudflare interop with @vercel/og (related to issue #1163 +
PRs #1169/#1176 in opennextjs/opennextjs-cloudflare, plus newer bundling
discussion in #1221).
Fix: switch to Next.js file convention static OG images. Place
app/opengraph-image.png + app/twitter-image.png (the same 1200x630
PNG that was being rendered dynamically). Next.js auto-emits og:image +
twitter:image metadata pointing at these routes, with correct
og:image:width/height/type tags. No @vercel/og, no WASM, no edge runtime.
The static PNGs were generated from PR #4202's dynamic ImageResponse during
local QA - identical visual output: dark #0a0a0a background, cyan
#00d4ff brand wordmark, headline, install command pill, terminal cursor.
Build verified: /opengraph-image.png and /twitter-image.png now show as
static routes (0 B route handler size). First-load JS unchanged.
Future-revisit: re-enable dynamic OG when @opennextjs/cloudflare ships the
fixes from PRs #1169/#1176/#1221 stable for Next 15.x deploys.
LocalizedPageShell at app/_components/localized-page-shell.tsx:34
already renders <main className='flex-1'>{children}</main> as the
page landmark. The manifesto/page.tsx shell was wrapping that with
its own <main>, producing nested main landmarks (axe-core:
landmark-no-duplicate-main + landmark-main-is-top-level).
Switch outer wrapper to <div>; keep styling (bg-background,
text-foreground, min-h-screen, overflow-x-hidden) intact. The
inner <main> from the shell remains the canonical landmark.
Pre-existing on origin/dev (the pre-decomposition manifesto/page.tsx
also had a top-level <main>), surfaced by PR #4202 hands-on QA
via axe-core run on /ko/manifesto.
Get Started button previously linked to /docs (root), landing users on
Overview. Issue #3848 reporter and concurrent PR #3948 asked for a
deeper link straight to Installation.
lib/docs-sections.ts declares 'installation' as a stable section id
rendered via <section id={section.id}> in app/[locale]/docs/page.tsx,
so /docs#installation is a valid deep link.
This also supersedes the in-flight PR #3948 (which targets the
pre-decomposition landing-page.tsx).
e2e/responsive.spec.ts (new):
- 6 viewports: iPhone SE (375x667), iPhone 14 Pro (390x844),
iPad mini (768x1024), iPad Pro (1024x1366), laptop (1280x800),
desktop (1920x1080)
- 4 locales: en, ko, ja, zh
- 2 pages: landing /, manifesto /manifesto
- Checks: no horizontal scroll, no overflow-x, primary CTA visible,
hero headline visible, nav button hit target (44x44 mobile / 32x32
desktop)
48 tests total. All pass against current build.
/docs has pre-existing horizontal overflow at 1024px viewport
(fixed-width sidebar interacting with code blocks). Intentionally
out of scope for this PR — commented in the spec, tracked as
follow-up.
YeonGyu-Kim