Troubleshooting
Learn more about troubleshooting issues with your Full-stack (SSR) Next.js apps using Cloudflare.
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";
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 ( // ... )}
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
// ...
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)}
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, }}