Skip to content

Troubleshooting

Learn more about troubleshooting issues with your Full-stack (SSR) Next.js apps using Cloudflare.

Edge runtime

You must configure all server-side routes in your Next.js project as Edge runtime routes, by adding the following to each route::

export const runtime = "edge";

App router

Not found

Next.js generates a not-found route for your application under the hood during the build process. In some circumstances, Next.js can detect that the route requires server-side logic (particularly if computation is being performed in the root layout component) and Next.js automatically creates a Node.js runtime serverless function that is not compatible with Cloudflare Pages.

To prevent this, you can provide a custom not-found route that explicitly uses the edge runtime:

export const runtime = 'edge'
export default async function NotFound() {
// ...
return (
// ...
)
}

generateStaticParams

When you use static site generation (SSG) in the /app directory and also use the generateStaticParams function, Next.js tries to handle requests for non statically generated routes automatically, and creates a Node.js runtime serverless function that is not compatible with Cloudflare Pages.

You can opt out of this behavior by setting dynamicParams to false:

export const dynamicParams = false
// ...

Top-level getRequestContext

You must call getRequestContext within the function that handles your route — it cannot be called in global scope.

Don’t do this:

import { getRequestContext } from '@cloudflare/next-on-pages'
export const runtime = 'edge'
const myVariable = getRequestContext().env.MY_VARIABLE
export async function GET(request) {
return new Response(myVariable)
}

Instead, do this:

import { getRequestContext } from '@cloudflare/next-on-pages'
export const runtime = 'edge'
export async function GET(request) {
const myVariable = getRequestContext().env.MY_VARIABLE
return new Response(myVariable)
}

Pages router

getStaticPaths

When you use static site generation (SSG) in the /pages directory and also use the getStaticPaths function, Next.js by default tries to handle requests for non statically generated routes automatically, and creates a Node.js runtime serverless function that is not compatible with Cloudflare Pages.

You can opt out of this behavior by specifying a false fallback:

// ...
export async function getStaticPaths() {
// ...
return {
paths,
fallback: false,
}
}