Loading...

How to run a website built with Next.js 15 on Cloudflare Pages?

question nextjs cloudflare
Ram Patra Published on March 19, 2025
Next.js 15+

If you simply connect a website’s code on GitHub with Cloudflare Pages that’s built using Next.js 15+, it may not build successfully out of the box. If this is the case with you, make sure to do the following.

Create a new .nvmrc file at the root of your project with this in it:

20 

Yes, it’s just the number 20. This specifies the node version to use.

Additionally, add the following to your package.json file:

"engines": {
  "node": ">=20.0.0"
}

That’s all you have to do. You do not have to change any commands on Cloudflare, etc. I built the website for SimpleFill using Next.js 15 and have deployed to Cloudflare Pages currently with no issues whatsoever.

Presentify

Take your presentation to the next level.

FaceScreen

Put your face and name on your screen.

ToDoBar

Your to-dos on your menu bar.

Ram Patra Published on March 19, 2025
Image placeholder

Keep reading

If this article was helpful, others might be too

question typescript react September 28, 2024 How to add a custom element to a Next.js/Typescript project?

Let’s say I have a custom element setapp-badge that I want to use in my tsx files. If I go ahead and use it, the compiler will throw an error and Next.js will fail to build. It seems the problem might be a combination of how Next.js, TypeScript, and custom elements work together. Therefore, let’s try an approach that avoids the namespace/module issues while ensuring custom elements are recognized in a Next.js/TypeScript project.

question nextjs react July 11, 2024 How to set environment variable in a Nextjs App and when to use NEXT_PUBLIC prefix?

Setting environment variables in a Next.js app is straightforward. Next.js supports loading environment variables from .env files. Here’s a step-by-step guide on how to set and use environment variables in your Next.js application:

question nextjs front-end December 21, 2024 Difference between router in next/navigation and next/router in Next.js?

In Next.js, there are two main ways to handle routing programmatically:

Like my work?

Please, feel free to reach out. I would be more than happy to chat.