[🐛 Bug]: Static route is failing to build as it is being treated as dynamic

[ted-marozzi]

next-on-pages environment related information

tedmarozzi@Teds-MBP blog % npx @cloudflare/next-on-pages --info

System:
        Platform: darwin
        Arch: arm64
        Version: Darwin Kernel Version 22.3.0: Mon Jan 30 20:39:46 PST 2023; root:xnu-8792.81.3~2/RELEASE_ARM64_T6020
        CPU: (12) arm64 Apple M2 Pro
        Memory: 32 GB
        Shell: /bin/zsh
Package Manager Used: npm (9.8.1)

Relevant Packages:
        @cloudflare/next-on-pages: 1.7.3
        vercel: N/A
        next: 14.0.2

Description

I an App router app that uses generateStaticParams to statically generate some routes at build time. Running next build I get a successful build

Route (app)                                           Size     First Load JS
┌ ○ /                                                 4.7 kB          178 kB
├ ○ /_not-found                                       0 B                0 B
├ ℇ /api/search                                       0 B                0 B
├ ○ /authors                                          568 B           124 kB
├ ○ /icon.png                                         0 B                0 B
├ ● /post/[slug]                                      9.87 kB         193 kB
├   ├ /post/what-to-pack-for-a-travel-nurse-contract
├   ├ /post/van-life-in-south-west-wa
├   ├ /post/nam-tucker
├   └ [+5 more paths]
├ ○ /privacy                                          137 B          84.6 kB
└ ○ /sitemap.xml                                      0 B                0 B
+ First Load JS shared by all                         84.5 kB
  ├ chunks/472-3f4eeec54bcaeb91.js                    29.2 kB
  ├ chunks/fd9d1056-c5160d4ab4b69aaf.js               53.3 kB
  ├ chunks/main-app-8dc533cc1221edaf.js               219 B
  └ chunks/webpack-8d523e0010b480fd.js                1.77 kB


○  (Static)        prerendered as static content
●  (SSG)           prerendered as static HTML (uses getStaticProps)
ℇ  (Edge Runtime)  server-rendered on demand using the Edge Runtime

with the route in question ( /post/[slug]) being SSG'd.

When I run npx @cloudflare/next-on-pages I get the following error

▲  Route (app)                                           Size     First Load JS
▲  ┌ ○ /                                                 4.7 kB          178 kB
▲  ├ ○ /_not-found                                       0 B                0 B
▲  ├ ℇ /api/search                                       0 B                0 B
▲  ├ ○ /authors                                          568 B           124 kB
▲  ├ ○ /icon.png                                         0 B                0 B
▲  ├ ● /post/[slug]                                      9.87 kB         193 kB
▲  ├   ├ /post/what-to-pack-for-a-travel-nurse-contract
▲  ├   ├ /post/van-life-in-south-west-wa
▲  ├   ├ /post/nam-tucker
▲  ├   └ [+5 more paths]
▲  ├ ○ /privacy                                          137 B          84.6 kB
▲  └ ○ /sitemap.xml                                      0 B                0 B
▲  + First Load JS shared by all                         84.5 kB
▲  ├ chunks/472-3f4eeec54bcaeb91.js                    29.2 kB
▲  ├ chunks/fd9d1056-c5160d4ab4b69aaf.js               53.3 kB
▲  ├ chunks/main-app-8dc533cc1221edaf.js               219 B
▲  └ chunks/webpack-8d523e0010b480fd.js                1.77 kB
▲  ○  (Static)        prerendered as static content
▲  ●  (SSG)           prerendered as static HTML (uses getStaticProps)
▲  ℇ  (Edge Runtime)  server-rendered on demand using the Edge Runtime
▲  Traced Next.js server files in: 215.024ms
▲  Created all serverless functions in: 773.209ms
▲  Collected static files (public/, static/, .next/static): 2.293ms
▲  Build Completed in .vercel/output [10s]
⚡️ Completed `npx vercel build`.
⚡️ Invalid prerender config for /post/[slug]
⚡️ Invalid prerender config for /post/[slug].rsc

⚡️ ERROR: Failed to produce a Cloudflare Pages build from the project.
⚡️ 
⚡️      The following routes were not configured to run with the Edge Runtime:
⚡️        - /post/[slug]
⚡️ 
⚡️      Please make sure that all your non-static routes export the following edge runtime route segment config:
⚡️        export const runtime = 'edge';
⚡️ 
⚡️      You can read more about the Edge Runtime on the Next.js documentation:
⚡️        https://nextjs.org/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes

Adding export const runtime = 'edge'; does indeed fix the build error but it forces the route to be ℇ (Edge Runtime) server-rendered on demand using the Edge Runtime where as I want it to be statically generated at build time.

Is this possible?

Reproduction

Here is the page in question.

git clone https://github.com/ted-marozzi/coasting-along.git
cd blog
npm i
# Comment out this line https://github.com/ted-marozzi/coasting-along/blob/b5db1c7695f15582beed59b3d3e8e4a190f486a4/blog/app/post/%5Bslug%5D/page.tsx#L23
# then run
npm run pages

Pages Deployment Method

Pages CI (GitHub/GitLab integration)

Pages Deployment ID

No response

Additional Information

No response

Would you like to help?

• Would you like to help fixing this bug?

[james-elicx]

You have to tell Next.js that it is truly static at build time and should not generic a fallback Node.js function for the dynamic route.

Please take a look at our docs for info on how to do that: https://github.com/cloudflare/next-on-pages/blob/main/packages/next-on-pages/docs/supported.md#statically-generated-routes-edge-cases

[dario-piotrowicz]

@ted-marozzi have you tried adding export const dynamicParams = false; as @james-elicx suggested above?

[ted-marozzi]

I can't remember exactly why but I don't believe it worked, I am just going to leave my build as dynamic for now. You are welcome to close the issue if you wish.

[dario-piotrowicz]

@ted-marozzi I have checked your repository, checked out commit 3660afc and applied this change in the blog/app/post/[slug]/page.tsx file:

-export const runtime = "edge";
+export const dynamicParams = false;

With that it seems like everything is working as expected:

So I am just closing this issue as it does feel like things are working as expected (at least as far as I can tell given your reproduction).

If you want please give ssg another shot and if it doesn't work let me know, we're always here to help 🙂 🙏

[strottos]

For what it's worth I just hit this problem and the solution worked great (edited out incorrect tagging). Might be worth adding to the suggestions output as an alternative to the suggested export const runtime = "edge"; but ultimately this solved my problem, thanks.

[strottos]

Apologies, should have credited @james-elicx and @dario-piotrowicz for the solution.