[🐛 Bug]: navigating directly to a dynamic route

[dodrian]

Cli version

0.7.0

Next.js related information

 Operating System:       Platform: darwin       Arch: arm64       Version: Darwin Kernel Version 21.6.0: Mon Dec 19 20:46:01 PST 2022; root:xnu-8020.240.18~2/RELEASE_ARM64_T8101     Binaries:       Node: 19.6.0       npm: 9.4.0       Yarn: 1.22.19       pnpm: N/A     Relevant packages:       next: 13.3.0       eslint-config-next: 13.3.0       react: 18.2.0       react-dom: 18.2.0

Vercel version

28.18.3

Description

I've seen this problem mentioned in a few other places but I don't see an issue specifically documenting it with steps to reproduce.

The file src/pages/members/[userId]/index.tsx should allow you to paste the url localhost:3000/members/1234 into the browsers and have the code in the index.tsx file render the page. This works fine with the default next commands npm run dev and npm run build && npm run start, but when you do this with npx @cloudflare/next-on-pages and npx wrangler pages dev .vercel/output/static --compatibility-flag=nodejs_compat --port=3000 (or upload to the cloudflare pages environment) navigating directly to the page returns a 404 page.

Navigating to a member page with a Next <Link> component, or using Next's router.push(url) works fine in the cloudflare environment.

Reproduction

https://github.com/dodrian/pages-next-app

From the root index page there are links (including dynamically generated links) to different member pages, and an input box with a button that will use router.push to navigate you to a member page. Following these links works fine, but if you then reload the page it returns a 404.

Additional Information

No response

Would you like to help?

• Would you like to help fixing this bug?

[dodrian]

I see that @james-elicx is working on overhauling the routing!

At the moment, using the pre-release from his pull request to build and then running with wrangler does not fix this specific issue.
npx https://prerelease-registry.devprod.cloudflare.dev/next-on-pages/runs/4633913574/npm-package-next-on-pages-153

[james-elicx]

Hello, can you please try adding the following to your next.config.js file.

experimental: {
  runtime: 'experimental-edge',
},

It seems that Next.js is not building any functions for the page when not targeting the edge runtime (probably because there is no server side functionality used on them), and by proxy is not creating any matchers in the middleware manifest that we currently use. Specifying the edge runtime appears to tell it that it should in fact create functions for these pages.

At least, that is what I have just encountered when trying out your repo.

At the moment, using the pre-release from his pull request to build and then running with wrangler does not fix this specific issue.

Just a note that that PR is mostly just build-time changes. Runtime changes to the routing process will be in the next PR, so the logic for matching routes is still the same with that.

[dodrian]

Aha! You're right - adding that to the next.config.js file does fix my reproduction example.

However, in the real project I'm working on the config change causes a bunch of failed to collect page data errors - I'll work on figuring out what a minimal example is to reproduce those - though it may end up being more of a documentation issue.

Thank you!

[dodrian]

Ahhh - I've figured out it's this issue - vercel/next.js#40379 - looks like you've been there too @james-elicx !

So this is an upstream issue then - except maybe that the documentation could be explicit that the next.config.js needs the following for some dynamic routes to work:

experimental: { runtime: 'experimental-edge', },

I figured I was OK because my project isn't yet using API routes.

[james-elicx]

Yeah, I'm afraid you'll have to make changes to your app to make it compatible with the edge runtime if you are getting errors about collecting page data.

Yeah, I'm afraid you'll have to make changes to your app to make it compatible with the edge runtime if you are getting errors about collecting page data.

Ahhh - I've figured out it's this issue - vercel/next.js#40379 - looks like you've been there too @james-elicx !

That issue was indeed frustrating, I honestly can't remember if I ever found a solution to the problem, other than deleting the files. 😅

So this is an upstream issue then - except maybe that the documentation could be explicit that the next.config.js needs the following for some dynamic routes to work:

experimental: { runtime: 'experimental-edge', },

This could be beneficial for the current state of next-on-pages. Although, I actually think that the new routing system could function okay without that config-level setting (pages with server functionality would still need the runtime setting). This would be because the Vercel build output config has overrides that tell me to serve a certain static html file when hitting a certain route, for example.

In fact, I just added a change to my current PR to make it easier to deal with that in the new routing system runtime, so thanks for making me think about that haha.

[dodrian]

My issue in particular is that I'm using _document.tsx, so unfortunately I can't get around the upstream issue just by deleting 404.tsx and 500.tsx. While less than ideal, I may end up changing the routes that need to be linked to use query strings instead.

[atjeff]

experimental: { runtime: 'experimental-edge' } does help a barebones app build, but it appears to turn all pages/ routes into separate functions. In my case my app using trpc from @trpc/next is giving me: "Error: Failed to publish your Function. Got error: Error: Script startup exceeded CPU time limit." at the last second. I'm assuming its the _worker.js file? Is there a way to find out which file it is?

[dario-piotrowicz]

@atjeff the CPU time limit is a known issue: #54

It is definitely the _worker.js file (since we bundle all there and it's the only js file that we upload), I think that unfortunately there isn't much you can do about it, but we're super close to fix that, it should be fixed by a matter of days I think, sorry for the inconvenience 🙏

[atjeff]

Oh wow, great news!