How do you properly deploy a Next.js app with dynamic routes to Cloudflare Pages?
I’m using Next.js 15 with the new app/directory and trying to deploy my project to Cloudflare Pages using @/cloudflare/next-on-pages. It's a pretty simple project not much going on (repo link below).
I've got cloudflare pages connected to the repo an I selected the basic Next.js Framework preset for the build configuration.
The build command is:
npx @/cloudflare/next-on-pages@1
The issue starts with dynamic routes - for example, I have pages like:
/[channelId]
/[channelId]/[threadId]
When I try to build the project for Cloudflare, I get this error:
javascriptCopyEditThe following routes were not configured to run with the Edge Runtime:
- /[channelId]
- /[channelId]/[threadId]
Please make sure that all your non-static routes export the following edge runtime route segment config:
export const runtime = 'edge';
So, I add export const runtime = 'edge' to those page files, and then everything breaks.
The build fails with this error:
Attempted import error: 'useState' is not exported from 'react'
But the components using useState are marked "use client" correctly. Even trying to dynamically import them with ssr: false doesn't work, because that’s not allowed in server components. I’ve tried wrapping them in a separate "use client" file and importing that, but the issue persists.
I understand that the Edge Runtime uses a stripped-down version of React without client hooks, but I can't figure out how to isolate the client-only components correctly so I can still render the rest of the page with SSR (for SEO).
So:
How are we actually supposed to use dynamic pages with client-side components under the Edge Runtime?
Is this even possible on Cloudflare right now with Next 15?
The exact same repo is connected to Vercel and builds just fine but I'd rather have it on Cloudflare.
Any real-world examples or workarounds?
Appreciate any help.
Project GitHub repo: https://github.com/tsabary/discord-board
4 Replies
Cloudflare Docs
Get started | Full-stack (SSR) | Next.js apps · Cloudflare Pages docs
Deploy a full-stack Next.js app to Cloudflare Pages
@Jerico Aragon should I be deploying a page using @cloudflare/next-on-pages OR a worker using @opennextjs/cloudflare actually?
@cloudflare/next-on-pages
Ideally OpenNext