Deploy Next js apps in Cloudflare pages

Deploy Next js apps in Cloudflare pages

next js on cloudflare pages

Cloudflare pages is the best alternative when it comes to serverless platforms like Vercel or Netlify . Because cloudflare pages is virtually free and unlimited where others are limited for 100Gb bandwidth. Also there is no limitation like no commercial use on free version like Vercel.

You can compare the pricing of vercel, netlify, cloudflare pages .

To be honest though cloudflare pages is free and unlimited but SSR (Server Side Rendering) is not supported by it which is the only visible downside of using cloudflare pages all pages are statically rendered on client machine. Cloudflare pages has unlimited bandwidth and requests for free which is great for some serious apps to casual side projects. It's better compared to paying $20 for some server side rendering and proprietary Vercel optimization.

Now let's see how to use cloudflare pages along with NEXT.JS,

Create a next project with npx create-next-app@latest

Terminal Next

upload project to github

github page

Open cloudflare homepage login and in dashboard go to workers and pages

cloudflare dashoard

click on create application

workers and pages

click on pages and on connect to git

create application

Link your git repository and begin setup and choose Next.Js in the framework section

deploy options

leave everything as it is if you are not using environment variables. If you are using environment variables then click on the option and add your environment variables.

Hit the Save and Deploy button.

There will be a error while opening the generated site like

Flag error

you have to copy the flag nodejs_compat and go to settings of the deployment and open functions window in it.

settings

In functions window there is a option to add compatibility flags add the copied text in both Production and Preview Options.

flags

Also change the Compatibility date to the nearest one (if not configured automatically)

compatibility date

After Doing everything thoroughly you have to re deploy the app by clicking on retry deployment.

After doing all the steps correctly the Next.Js app will be deployed in Cloudflare Pages link

Result

Feel free to comment if you are facing any problem.

Happy coding :)


Want to support my work

Did you find this article valuable?

Support PRATYAY MUSTAFI by becoming a sponsor. Any amount is appreciated!