Skip to content
Cloudflare Docs
We recommend using Cloudflare Workers for new projects. For existing Pages projects, see our migration guide and compatibility matrix.
Close

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,
  }
}