Jan Varho

Next on Pages

After my foray into serveless-nextjs I happily used it for personal projects for the last few years. However, Next.js moves fast and the project seems to have stalled, so I had to look into alternatives.

I've already used Cloudflare as a CDN and domain host, so I was happy to find Next-on-pages, which is a way to run Next.js serverlessly on Cloudflare Pages.

Setting up a new test project is easy, using the guide and specifically just running:

npm create cloudflare@latest test-app -- --framework=next

The interactive questions take are of everything and result in a nice development experience.

However, porting an existing site/app was a bit more of a hassle.

1. First I had to upgrade to the latest next.js release, since the one I'd been using with sls-next was too old. Luckily there wasn't anything too bad.

2. Next step was replacing sls with @cloudflare/next-on-pages, rewriting next.config.js and changing the runtime from serverless to edge. The last was a bit confusing, since documentation never spelled out how different things are between the app and pages routers:

   The only way I managed to make work was using:

    export const runtime = 'experimental-edge'
   

   On every page.

3. After many an invocation of npx @cloudflare/next-on-pages I managed to make everything build. (Note! You need a "build" command in package.json which only runs next build, mine was left over from sls-next and did... other things.) Deploying was easy using Cloudflare Dashboard

4. Once everything was provisionally working I of course wanted to use all the new features from next.js so it was another porting operation from pages/ to app/. Luckily that's reasonably well documented.

All in all my experience is so far positive. Deployments are especially pleasant: every git push is built and deployed to a temporary url and a bot posts status reports and links to pull requests.

OTOH: next.js caching is increasingly confusing with all the new features.