In this tutorial, you will learn how to set-up a NextJs website using Cloudflare pages. After learning how to use Cloudflare pages I will do a compare and contrast against Netlify to see which one is the best option to host your static-site JAMStack website

Hosting A NextJs Website Using Cloudflare Pages

Hosting up a NextJs website is simple, you need two things:

  • A working NextJs site
  • A Github or Gitlab account
  • The code committed

To configure NextJS to be a JAMStack site, within 'package.json', update the 'build' command, like this:

You can also configure some Cloudflare Pages related server settings within your application, specifcaly redirects and HTTP headers. First you can create a file called '_redirects'. In here you can configure a redirect. An example looks like this:

EXAMPLE

You can also add HTTP headers by creating a file called '_header'. If you want to allow CORS for all external requests, yo can do that like this:

EXAMPLE

In order to configure Cloudflare pages you need to know the 'build' command and the output folder 'out'.

Creating a Cloudflare Account

Go over to https://pages.cloudflare.com and either log-in or create a new account. Click on the 'Create New Project' button. Hook up your GITHub account and select your repository from Github:

IMAGE

If you use a newer version of NextJS you may need to set the 'NODE_VERSION' value. This is done like this:

IMAGE

Clicking 'Next' should now assign our project new Url.

Netlify Vs Cloudflare Pages

Setting up a page using Cloudflare pages is easy, is it worth the effort? It is time to see how Cloudflare pages stacks up against Netlify. Lets see who wins head-to-head. With both, you have the basics of hosting a JAMStack site covered. You can push code, do builds, set-up web-hooks, configure the build commands, and look at the build logs. Let us compare the rest:

Build Time: I admit this is not a 100% scientific test. I deployed the same code on Netlify and Cloudflare pages. Overall I definitely found Netlify quicker. On my last build, Netlify took 1m 23s while Pages took 3m 30s. Two minutes different is a pretty big time saver. Who likes waiting for builds?!?!

Price: Both providers are free in the starter tier. Netlify is $1 a month cheaper for Pro and, $100 dollars cheaper at Business. Netlify also offers enterprise hosting for much larger companies. This is something Pages does not offer

WINNER: For free hosting, it's a draw. When you scale Netlify due to the enterprise tier!

Serverless Functions: Both providers have the capabilities to do serverless functions. The Cloudflare equivalent is called 'workers'. In Cloudflare workers, and more powerful compared to Netlify. You have a nice UI that allows you to build, test and debug your function from the dashboard

WINNER: Cloudflare Workers

Features: Netlify has been around for a lot longer than Cloudflare pages. This means you can do a lot more in Netlify compared to Cloudflare. Better atomic deployment management with locked deployments, badges, pre and post-processing build abilities, forms, identify, A/B test, target multiple branches, build badges, forms,

WINNER: Netlify

Portal UI: I find Cloudflare's UI really barebones. I think the Netlify portal is well polished and its more intuitive to use.

WINNER: Netlify

The Winner

From this comparison, I think it is obvious that Netlify is still the champ (IMHO). Netlify has been around a lot longer, its interface is more sleek and it has lots more features. Site set-up is equally quick, both are FREE.

When should you use Cloudflare pages? One interesting use case that you can't do in Netlify creates and manage a micro-front for your application. If you have Cloudflare premium, you will get access to a load balancer and reverse proxy. This will be called before your Pages application. Using the load balancer and reverse proxy, you could split your frontend into a micro-front end fairly easily with Cloudflare pages. This could be a cool usage 💥

As Cloudflare page is new, I'm sure it will get more advanced with time. For now I think Netlify is the clear winner because of its feature set, looks and easy UI. The decision is all yours. For free you can't grumble. Happy Coding 🤘