Skip to main content

Cloudflare support for Next.js

Context​

Whilst debating the URL structure for Auth and the Progressive Profiling application we came up with 3 proposals on where and how we host it. The key takeaway is that we could not host it on the auth.rapha.cc domain as that is an alias for Auth0.

The proposals were:

  1. Host it on Cloudflare Pages as a new SPA which allows us to stay on domain and use a route or path (raphadev|rapha.cc/en/gb/profile)
  2. Host it on Alderaan as a separate page (content.raphadev|rapha.cc/profile)
  3. Host in on a new subdomain as a new SPA application on Vercel (account.raphadev|rapha.cc/profile)

Investigation​

We immediately ruled out Option 2 for the following reasons:

  • Introduction of tech debt in the wrong context - Alderaan has been exclusively used for the migration of CMS up to this point. We would be adding tech debt as eventually we would like to remove the progressive profiling in favour of custom fields in Auth0.
  • Turning Alderaan into a monolith - Our overall strategy is move towards a microfrontend architecture where a web application is divided into different modules or individual functions, implemented autonomously, allowing frontend teams the same level of flexibility and speed that microservices provide to backend teams. Adding more functionality into Alderaan thus turns it into a Monolith.

We therefore did some analysis on if we could host this in Cloudflare pages. This would in turn make it possible for us to stay on domain. Ultimately we opted to not use Cloudflare pages because of the following:

  • Use of experimental features in a production application - Because of the potential traffic the progressive profiling application will recieve we felt that is is not appropriate to use experimental features
  • No error logging in production - Logs can be tailed when running via Wrangler in a local machine. This however is not helpful when trying to debug in production. We therefore felt this was a poor developer experience
  • Unsupported APIs in Edge Runtime
    • Native Node.js APIs are not supported. For example, you can't read or write to the filesystem
    • node_modules can be used, as long as they implement ES Modules and do not use native Node.js APIs
    • Calling require directly is not allowed. Use ES Modules instead
  • The following JavaScript language features are disabled and will not work:
    • eval. Evaluates JavaScript code represented as a string
    • new Function(evalString). Creates a new function with the code provided as an argument
  • Having to use unstable_allowDynamic to get packages to work in the Edge Runtime. However, because a lot of popular packages will use the disabled Javascript language features we would have to produce far more vanilla code to achieve small tasks
  • Poor developer experience overall with Cloudflare pages
  • Adding more sprawl to our stack. The longterm goal is to host all of our frontend applications in the same place. This is not only for discoverability but to ensure we have consistency for aspects such as CI and CD.

Decision​

The decision therefore is to host the Progressive Profiling application in keeping with Alderaan on Vercel. This does mean that we have to use another subdomain but we do see this becoming part of the account process and the code will be migrated to that domain.

Resources​