CLI to build and develop Next.js apps for Cloudflare Pages
### next-on-pages environment related information $ npx @cloudflare/next-on-pages --info System: Platform: darwin Arch: arm64 Version: Darwin Kernel Version 24.0.0: Tue Sep 24 23:39:07 PDT 2024; root:xnu-11215.1.12~1/RELEASE_ARM64_T6000 CPU: (10) arm64 Apple M1 Max Memory: 32 GB Shell: /opt/homebrew/bin/fish Package Manager Used: npm (8.1.0) Relevant Packages: @cloudflare/next-on-pages: 1.13.5 vercel: N/A next: 14.2.15 ### Description Create an app diretory with a route `/[slug]` and a page.tsx and opengraph-image.tsx. ``` import getPosts, { getPost } from '@/lib/getPosts'; import { ImageResponse } from 'next/og'; // Image metadata export const alt = 'Blog Post'; export const size = { width: 1200, height: 630, }; // export const dynamic = 'force-static'; export const runtime = 'edge'; export const contentType = 'image/png'; // Image generation export default async function Image({ params }: { params: { slug: string } }) { const post = getPost(params.slug); return new ImageResponse( ( // ImageResponse JSX element <div style={{ fontSize: 128, fontWeight: 900, background: '#252A31', color: '#F8F7F8', width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', }} > {post?.title} </div> ), // ImageResponse options { // For convenience, we can re-use the exported opengraph-image // size config to also set the ImageResponse's width and height. ...size, } ); } export async function generateStaticParams() { return getPosts('true').map((post) => ({ slug: post.slug, // bypass: post.is_draft ? 'true' : undefined, })); } ``` If you mark the page as static (`export const dynamic = 'force-static';`), the build errors with: ``` 17:08:20.984 | ▲ Finalizing page optimization ... -- | -- 17:08:20.985 | ▲ Collecting build traces ... 17:08:25.729 | ▲ 17:08:25.732 | ▲ Route (app) Size First Load JS 17:08:25.733 | ▲ ┌ ○ / 1.55 kB 134 kB 17:08:25.733 | ▲ ├ ○ /_not-found 146 B 87.2 kB 17:08:25.733 | ▲ ├ ● /[slug] 1.53 kB 127 kB 17:08:25.733 | ▲ ├ ├ /this-just-might-work 17:08:25.733 | ▲ ├ ├ /introduction 17:08:25.733 | ▲ ├ └ [+3 more paths] 17:08:25.733 | ▲ ├ ● /[slug]/opengraph-image 0 B 0 B 17:08:25.733 | ▲ ├ ├ /this-just-might-work/opengraph-image 17:08:25.734 | ▲ ├ ├ /introduction/opengraph-image 17:08:25.734 | ▲ ├ └ [+3 more paths] 17:08:25.734 | ▲ ├ ƒ /api/hello 0 B 0 B 17:08:25.734 | ▲ ├ ○ /icon 0 B 0 B 17:08:25.734 | ▲ └ ○ /streaming 146 B 87.2 kB 17:08:25.734 | ▲ + First Load JS shared by all 87.1 kB 17:08:25.735 | ▲ ├ chunks/117-5d8cc30e25f0e260.js 31.6 kB 17:08:25.735 | ▲ ├ chunks/fd9d1056-8fef90fb5a0b2194.js 53.6 kB 17:08:25.735 | ▲ └ other shared chunks (total) 1.86 kB 17:08:25.735 | ▲ ○ (Static) prerendered as static content 17:08:25.735 | ▲ ● (SSG) prerendered as static HTML (uses getStaticProps) 17:08:25.735 | ▲ ƒ (Dynamic) server-rendered on demand 17:08:25.793 | ▲ Done in 33.42s. 17:08:26.182 | ▲ Traced Next.js server files in: 320.346ms 17:08:26.317 | ▲ Created all serverless functions in: 134.516ms 17:08:26.383 | ▲ Collected static files (public/, static/, .next/static): 9.32ms 17:08:26.475 | ▲ Build Completed in .vercel/output [35s] 17:08:26.513 | ⚡️ Completed `npx vercel build`. 17:08:26.565 | ⚡️ Invalid prerender config for /[slug]/opengraph-image 17:08:26.566 | ⚡️ Invalid prerender config for /[slug]/opengraph-image.rsc 17:08:26.566 | ⚡️ Invalid prerender config for /[slug] 17:08:26.567 | ⚡️ Invalid prerender config for /[slug].rsc ``` If you mark the page as dynamic (edge), the project builds but the route errors with:  ### Reproduction _No response_ ### Pages Deployment Method Direct Upload (`wrangler pages publish` or the @cloudflare/pages-action GitHub Action) ### Pages Deployment ID 8c4fc278-c79e-44c9-9008-a9400a8c7fc6 ### Additional Information I'm fine if this works at build-time statically, but neither seem to work ### Would you like to help? - [X] Would you like to help fixing this bug?
This issue appears to be discussing a feature request or bug report related to the repository. Based on the content, it seems to be resolved. The issue was opened by switz and has received 1 comments.