Should You Host Your Next.js Application Elsewhere Than Vercel?

This week, I want to talk to you about hosting a framework that needs no introductions...drum roll...Next.js.

If you work in Web Development, it is highly likely you have come across it as it dominates the React landscape. Next.js offers production-grade settings out of the box, allowing you to build performant applications quickly.

In today's read, you will explore the DevOps and hosting landscape around the Next.js framework.

Let's dive in...

Deployment Support and Options

Next.js can generate pages either by rendering them on a server each time a user visits the page(i.e. Server-Side Rendering, which for the sake of brevity, will be shortened to SSR further down the article). Next.js also can pre-generate all your pages during the build phase (i.e. Static Site Generation, which will also be shortened to SSG).

The deciding factor on whether you should pick SSR or SSG will majorly depend on how dynamic your content is. For fast-paced content that changes often, you have to prioritize SSR while for more static content you should pick SSG.

The hosting provider that integrates the best with Next.js features is without a doubt Vercel, the company behind the framework. Next.js almost serves as an R&D lab for new hosting features Vercel is working on. There are other options that offer a near-perfect integration like Netlify.

Netlify works hard to create a compelling option when it comes to hosting Next.js but it does lag behind in releasing new features as they are not the framework authors, and thus do not have access to the earliest information about Next.js and its future.

It goes without saying that for the featured hosting option, you should use Netlify or Vercel. But what if you do not care about all of the advanced features and you instead just want to host Next.js as a good old static website? Cloudflare Pages is one option I would totally recommend.

Let's explore how this would look like by using Cloudflare Pages as an example for hosting a purely static Next.js application.

Deploying And Hosting On Cloudflare Pages

Pages is a serverless offering by the major CDN provider, CloudFlare. It offers seamless integration support with GitHub, allowing you to deploy applications just by merging a pull request or merging into the main branch.

Requirements

To follow along this tutorial, you will need a few things:

A Github account.
A Cloudflare account.

Now that you have the above, let's get deploying!

Deployment

1. Creating A Purely Static Next.js Application

FirsT, generate a new project that will act as the base for your Next.js app that you will host on Pages. We'll name our application docs-to-rock simply for fun but feel free to use whatever name you wish.

npx create-next-app --example with-static-export docs-to-rock

If you've been an avid reader of this blog, you will recognize that I always use yarn in tutorials. In this case the build servers used by cloudflare are using an old Node.js version (12.xx) that causes issues with yarn. I will be using npm commands for this post.

s### 2. Create A GitHub Repository

Cloudflare Pages works by listening to changes inside a GitHub repository. So we'll create one and push our code to it! Follow the instructions from the GitHub Docs to create an empty repository. If you are a newer developer, this will soon become second nature!

Once that is done proceed to push the repository on GitHub:

git remote add origin https://github.com/<your git username>/<your app name>
git branch -M main
git push -u origin main

3. Connect The Repository To Cloudflare

Login to your Cloudflare dashboard and navigate to the Pages section located on the left navbar. Follow these instructions:

Create a new project, you will be asked to connect to your GitHub account.
If not done already, proceed to connect and authorize Cloudflare on your Github account.
Select your new project's repository.
In the build settings section, keep things simple, use the Next.js preset.

Cloudflare Build settings page showing the following settings: Framework preset with Next.js selected, Build command with next build && next export in the input, Build output directory with /out in the input

Once this is all filled out, simply hit done and see the magic happen...

For me the magic ended here, while this tutorial is about finding an alternative to Vercel, I had to fight with my build several times just to deploy an Hello World! application.

Completing the steps outlined here will give you a working build but the lack of a recent Node.js version in the build system means a slow build of around 1 minute for a static site of a single page

So...Should you host Next.js on Cloudflare pages?

The answer to this question is not a simple yes or no. From a DevOps point of view, Cloudflare proposes an awesome system with automatic great GitHub integration and a friendly development experience (that still leaves room for improvements).

Also, from a frontend point of view, you should really question yourself about letting go of all the goodies which hosting your Next.js application on Vercel or Netlify offers.

The following reasons keep me from recommending Cloudflare Pages for Next.js:

An out of date Node.js version in the build system.
No access to SSR and newer Next.js features like the image optimization.
For purely static sites, Astro integrates in a better way with Cloudflare pages.

If you enjoyed this article, don't hesitate to share with your friends. Connect with, and tweet your thoughts and comments at me on Twitter or on Youtube.