[🐛 Bug]: Dynamic Pages / Routes can't deploy to Cloudflare Pages

[exepowered]

next-on-pages environment related information

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

Description

I'm currently building a website with Next.js 14 and Prismic.io CMS. It seems like there's an issue with Dynamic Pages / Dynamic Routes on Cloudflare Pages deploy.

When deployed to Vercel or running locally, my app works flawlessly.

On Cloudflare Pages deploy, the pages are marked correctly as λ (Dynamic) server-rendered on demand using Node.js, but the deploy fails:

16:22:18.726    ⚡️ ERROR: Failed to produce a Cloudflare Pages build from the project.
16:22:18.726    ⚡️ 
16:22:18.726    ⚡️  The following routes were not configured to run with the Edge Runtime:
16:22:18.726    ⚡️    - /[manufacturer]/[uid]
16:22:18.727    ⚡️    - /kategoria/[uid]
16:22:18.727    ⚡️    - /producent/[uid]
16:22:18.727    ⚡️ 
16:22:18.727    ⚡️  Please make sure that all your non-static routes export the following edge runtime route segment config:
16:22:18.727    ⚡️    export const runtime = 'edge';
16:22:18.727    ⚡️ 
16:22:18.727    ⚡️  You can read more about the Edge Runtime on the Next.js documentation:
16:22:18.727    ⚡️    https://nextjs.org/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes
16:22:18.727    
16:22:18.747    Failed: Error while executing user command. Exited with error code: 1

When I add export const runtime = 'edge' to my failing page.tsx (although it should work under node.js default runtime, and it does so on Vercel), the page deploys succesfully as ℇ (Edge Runtime) server-rendered on demand using the Edge Runtime.

Now trying to access the page, I'm getting this error:

Application error: a server-side exception has occurred (see the server logs for more information).
Digest: 3018982495

Reproduction

Run a Next.js 14 (App Router) app with Dynamic Pages, and Prismic.io CMS in my case. Try deploying to Cloudflare Pages. Example code.:

// src/app/[manufacturer]/[uid]/page.tsx

import { Metadata } from "next";
import { notFound } from "next/navigation";
import { SliceZone } from "@prismicio/react";

import { createClient } from "@/prismicio";
import { components } from "@/slices";

type Params = { uid: string };

export default async function Page({ params }: { params: Params }) {
  const client = createClient();
  const page = await client
    .getByUID("product", params.uid)
    .catch(() => notFound());

  return <SliceZone slices={page.data.slices} components={components} />;
}

export async function generateMetadata({ params }: { params: Params; }): Promise<Metadata> {
  const client = createClient();
  const page = await client
    .getByUID("product", params.uid)
    .catch(() => notFound());

  return {
    title: page.data.meta_title,
    description: page.data.meta_description,
    openGraph: {
      images: [page.data.meta_image?.url || ''],
    },
  };
}

Pages Deployment Method

Pages CI (GitHub/GitLab integration)

Pages Deployment ID

0a8c872 and 114366d

Additional Information

Found a similar issue here, but unable to fix: #32 and #35

Would you like to help?

• [X] Would you like to help fixing this bug?

[ghost]

Facing the same issue here.

It seems that the problem is related to importing client components in the page.jsx file.

[diptnc]

same , the dynamic routes with export const runtime = "edge" gives server side error in cloudflare pages

[beyourahi]

facing the same issue, any solution?

[exepowered]

Personally, I switched back to Vercel, at least for now. They support Next.js natively, and apply some nice features e.g. image optimization that Cloudflare Pages doesn't support.

[beyourahi]

Source: https://developers.cloudflare.com/pages/framework-guides/nextjs/deploy-a-nextjs-site/#generatestaticparams

This is straight out of the docs but it doesn't work for me.