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:
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:
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:
If you use a newer version of NextJS you may need to set the 'NODE_VERSION' value. This is done like this:
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,
Portal UI: I find Cloudflare's UI really barebones. I think the Netlify portal is well polished and its more intuitive to use.
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 🤘