Cloudflare Pages is a platform that allows developers to deploy JAMStack applications on CloudFlare's Edge network for free. JAMStack applications are pre-generated websites or web applications i.e they don't need a node js server to work. In this article, we will look into creating a JAMStack application with NextJS and deploying it on Cloudflare Pages. The free tier is sufficient for most applications in the wild. All you need is a Github/Gitlab account.

Similar solutions are:

• Netlify
• Firebase Hosting
• AWS Amplify

JAMStack architecture has a number of benefits over traditional web applications where pages are generated on the fly:

• Better Performance
• Security
• Cheaper and easier scaling
• Better developer experience

Let's start by creating a NextJS application:

yarn create next-app --example with-static-export cloudflare_pages_deploy

Navigate to the project folder, build and export the application to confirm it's working, this is not strictly necessary just a sanity check.

yarn build && yarn export && yarn start

If all is working as expected, make any commits you need and push your changes to a Github/Gitlab repo.

If you don't have an account on Cloudflare create one, log in, and go to the Cloudflare dashboard, click on Pages. At the time of this writing, it's on the menu to the left.

Click on Create a Project. This will launch a dialog that allows you to connect your Github or Gitlab account. Once you have connected your account, the repositories in that account will be listed.

Select the repo you pushed your project to above and click Begin setup. On the next screen enter a project name and pick the branch that will be checked out for the build. Under framework preset pick Next.js (Static HTML Export). This will prefill some of the next few options. Under Environment variables (Advanced) add a variable NODE_VERSION with a value set to the same version that you used locally to build your project above. Click Save and deploy, this should take you to a screen where you can view the progress of the deployment.

If the build was successful click Continue to project. You can visit your site by clicking visit site.