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:
- Firebase Hosting
- AWS Amplify
JAMStack architecture has a number of benefits over traditional web applications where pages are generated on the fly:
- Better Performance
- 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.
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