[🐛 Bug]: SSG (with nodejs build) doesn't work with dynamic paths

[atmelmicro]

next-on-pages environment related information

System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 23.2.0: Wed Nov 15 21:53:18 PST 2023; root:xnu-10002.61.3~2/RELEASE_ARM64_T6000
CPU: (10) arm64 Apple M1 Pro
Memory: 16 GB
Shell: /bin/zsh
Package Manager Used: bun (1.0.29)

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

Description

The next-on-pages CLI doesn't recognize a statically built page as one (if it's under a dynamic path). Since I want to read a page from the file system I need to use the fs package. Using export const runtime = "edge" is not possible, because SSG is disabled with the edge runtime.

Example

// file - app/[test]/page.tsx
import { readFile } from "node:fs/promises";

export async function generateStaticParams() {
  return [{ params: { test: "a" } }];
}
export const dynamicParams = false;

export default async function Home() {
  return <div>{await readFile("./test.txt", "utf-8")}</div>;
}

Result

▲  Route (app)                              Size     First Load JS
▲  ┌ ○ /                                    144 B          80.5 kB
▲  ├ ℇ /_not-found                          0 B                0 B
▲  └ ● /[test]                              145 B          80.5 kB
▲  + First Load JS shared by all            80.4 kB
▲  ├ chunks/158-6fbf37114af09a15.js       27.5 kB
▲  ├ chunks/fd9d1056-e4950b334bc218cf.js  50.9 kB
▲  ├ chunks/main-app-0ccff3981b530714.js  252 B
▲  └ chunks/webpack-53f3f27345fff52b.js   1.69 kB
▲  ℇ  (Streaming)  server-side renders with streaming (uses React 18 SSR streaming or Server Components)
▲  ○  (Static)     automatically rendered as static HTML (uses no initial props)
▲  ●  (SSG)        automatically generated as static HTML + JSON (uses getStaticProps)
⚡️ ERROR: Failed to produce a Cloudflare Pages build from the project.
⚡️ 
⚡️      The following routes were not configured to run with the Edge Runtime:
⚡️        - /[test]
⚡️ 
⚡️      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

In the next build info it says SSG so I assume it's not injecting any fs imports into the final bundle. However the cloudflare CLI still wants me to add export const runtime = 'edge';

Without any params

// file - app/page.tsx
import { readFile } from "node:fs/promises";

export const runtime = "nodejs";

export default async function Home() {
  return <div>{await readFile("./test.txt", "utf-8")}</div>;
}

Works without issues, even with runtime = "nodejs"

Stuff I tried

• Adding runtime = "nodejs"
• Adding not-found.tsx
• dynamicParams = false;
• dynamic = 'force-static'
• downgrading next (from v13.5.6 <-> v14.1.2)

Reproduction

https://github.com/atmelmicro/pages-test

Uses bun as its pkg manager. bun run cf:build to run next-on-pages

Pages Deployment Method

None

Pages Deployment ID

No response

Additional Information

Related - #545

Would you like to help?

• Would you like to help fixing this bug?

[dario-piotrowicz]

Hi @atmelmicro 🙂👋

Thanks for the issue

I think the problem is that your code is using generateStaticParams incorrectly, the array you return should contain the
segment's name (without params) (as per the Next.js docs)

This simple change seems to fix the issue:

Note

I have no idea why Next.js is not complaining about it! ¯\(ツ)/¯ I'd argue that that is a bug in Next.js itself

Could you please have a look and let me know if that solves the problem for you? 🙂

[atmelmicro]

Yeah, that fixed it. Thanks a lot!

[atmelmicro]

Yikes, I've been trying to fix the issue in my bigger project and if you have a layout above a SSG route with a server component it will not work. I guess next defaults to the node runtime if the site cannot be fully SSG'd, but it also never says that? No clue what it's actually doing. In the future I think PPR will fix this, but it's not supported in next-on-pages. It needs a canary version, tried that, didn't work (not surprised as the docs say that canaries are unsupported).

It doesn't bother me that much, I'll switch to client-side data fetching for that component, just though it would good to share

[dario-piotrowicz]

@atmelmicro cool! sorry for all the inconveniences 😓

I guess next defaults to the node runtime if the site cannot be fully SSG'd, but it also never says that? No clue what it's actually doing.

I am not surprised at all! 🥲 From personal experience with this project I can tell that Next.js, in regards to Lambdas and Edge, does lots of stuff under the hood without necessarily make it clear or document it for the user 🥲 (and they also give the node runtime a preferential treatment IMO)