How to deploy a next.js static app to Cloudflare pages

Hello World!

I am writing this article so you don’t face the same problems that I faced when I was trying to deploy a next.js application to Cloudflare Pages.

1. Create a git repo using the standard next.js command or if you’d like you can clone this repo

npx create-next-app nextjs-cloudflare

2. Go to Cloudflare Pages and create a project and give Cloudflare access to the repo and configure the project as follow and then click on the button at the bottom

setup in Cloudflare UI

3. The default next.js boilerplate fails because of an issue with next/image library issue reported here https://github.com/vercel/next.js/issues/18356

I chose to comment it out to get the deployment to succeed but you can choose to follow the suggestions made in the above github issue link

comment out the issue causing next/image usage

Once you push the change, the deployment should be successful and you should be able to access your new deployment on Cloudflare pages.

deployed page

Cheers, Hope this saved you some time and annoyance.