Running Next.js on Cloudflare Pages.

Overview

Nextflare - Run Next.js Edge Runtime on Cloudflare Pages (Workers)

NOTE: We're still actively updating this repository, docs, and preparing a potential release on NPM, this package is highly experimental and might break at any time, and we might even introduce a rename soon.

This (experimental) tool allows you to run Next.js with Edge Runtime on Cloudflare Pages!

Current approach

Currently, Next.js outputs by default an individual Edge Function for each Page or API Route, including a full NextWebServer for each function. This is not ideal since that requires us to write a custom router, since for Cloudflare Workers / Pages, we can only upload one worker (or multiple functions but those get bundled anyways).

So, for now we're using esbuild and the middleware-manifest.json outputted by next build to bundle those functions together, and output a _worker.js file based on the worker.template.ts file, compatible for Cloudflare Pages with a custom router that forwards requests to the right functions.

We put all truely static files in the _routes.json file so we can skip executing this worker.

Possible future approach

I'm experimenting with hooking into the webpack configuration of Next.js to be able to include a custom entrypoint for a custom CloudflareWebServer based on BaseServer optimized for Cloudflare Pages. This would allow us to build a LOT more features like incremental static generation and have overall greater feature parity.

Supported Features

Unsupported Features

  • Static Generation
    • Next.js doesn't support this yet for the Edge Runtime, will be outputted as a SSR page.
  • Image Optimization
    • Possible with custom image loaders, the built-in loader is currently just a simple passthrough to the static image.
  • Incremental Static Generation
    • This might be possible in the future using a custom Cloudflare KV store for example, but will require us to use the possible future approach.
  • App Dir / Layouts RFC
    • In the current state it changes the build output in ways that are not optimal, e.g. edge chunking is lost, would be able to support at a later stage.

Interesting resources and points within the Next.js codebase:

How to get started.

We haven't bundled this into NPM yet, so cloning this repository will be needed, you'd need to use PNPM. You'd need to make sure your project is using Edge Runtime.

  1. Use the Global Runtime Option to make sure your project is using Next.js Edge Runtime and works fully with that runtime in next dev.
  2. Once verified everything works as you expect, run next build to generate a build.
  3. Next run nextflare build in the root of your next.js project, where your package.json / next.config.js file is located.
  4. An folder called dist will be generated, this folder you can directly upload to Cloudflare Pages.

Configuration on Cloudflare.

In order for SSR to work, you'd need to enable some compatibility flags on Cloudflare Pages, this is currently only possible using the API, this curl call will set the compatibility date to 2022-08-16 and add the following flags to your Cloudflare Pages project:

  • transformstream_enable_standard_constructor
  • streams_enable_constructors
curl https://api.cloudflare.com/client/v4/accounts/ACCOUNT_ID/pages/projects/PROJECT_SLUG -H 'X-Auth-Email: YOUR_EMAIL' -H 'X-Auth-Key: YOUR_AUTH_KEY' -X PATCH -d '{"deployment_configs":{"production":{"compatibility_date": "2022-08-16", "compatibility_flags": ["transformstream_enable_standard_constructor","streams_enable_constructors"]},"preview":{"compatibility_date": "2022-08-16", "compatibility_flags": ["transformstream_enable_standard_constructor","streams_enable_constructors"]}}}'
  • Replace ACCOUNT_ID with your Cloudflare Account ID.
  • Replace PROJECT_SLUG with your project slug on cloudflare for cloudflare pages
  • Replace YOUR_EMAIL with your email address
  • Replace YOUR_AUTH_KEY with your auth key
You might also like...

Next.js landing pages with two axios carousel

Next.js landing pages with two axios carousel SEO friendly page builder in React.js. Heroes, sign-up forms and calls to action. Deployed from sanity.i

Mar 30, 2022

基于 gh-proxy + Jsdelivr+ cnpmjs + cloudflare workers 的 GitHub Serverless API 工具。

better-github-api Better, Eazy, Access Anywhere 介绍 基于 gh-proxy + Jsdelivr + cnpmjs + cloudflare workers 的 GitHub Serverless API 工具。 cdn.js:仅含 gh-proxy

Nov 23, 2022

Javascript implementation of flasher tool for Espressif chips, running in web browser using WebSerial.

Javascript implementation of esptool This repository contains a Javascript implementation of esptool, a serial flasher utility for Espressif chips. Un

Dec 22, 2022

A hackable C# based scripting environment for 3D modeling running in the web browser.

A hackable C# based scripting environment for 3D modeling running in the web browser.

A hackable C# based scripting environment for 3D modeling running in the web browser. Background Script based 3D modeling software running in the web

Nov 28, 2022

A Cloudflare Worker for fetching data from Twitter User API.

cloudflare-worker-twitter This is a Cloudflare Worker for fetching data from Twitter User API. ❔ About this project I created this Worker to hide my A

Oct 1, 2022

Example-browserstack-reporting - This repository contains an example of running Selenium tests and reporting BrowserStack test results, including full CI pipeline integration.

BrowserStack reporting and Selenium test result example This repository contains an example of running Selenium tests and reporting BrowserStack test

Jan 1, 2022

WebVM is a server-less virtual Linux environment running fully client-side in HTML5/WebAssembly.

WebVM This repository hosts the source code of the https://webvm.io live demo page. WebVM is a server-less virtual Linux environment running fully cli

Jan 8, 2023

A Restaurant (Table) Reservation API built with Node, TypeScript, Express, TypeORM, a MySQL DB, all running on Docker containers

Restaurant (Table) Reservation API A simple API for reserving tables at a restaurant. The API is based on the REST architectural style and uses Node.j

Oct 5, 2022

A collection of Javascript scripts running with Alchemy Web3.js, Fetch, or Axios

Alchemy NFT API Javascript Scripts Clone the repo, install dependencies, and try the API out! Clone git clone [email protected]:alchemyplatform/nft-api-j

Nov 29, 2022
Comments
  • Order of route information from `middleware-manifest.json` is not deterministic

    Order of route information from `middleware-manifest.json` is not deterministic

    The route info in middleware-manifest.json is not deterministic since it's stored in a dict.

    For pages, pages/a/a.tsx should be tested before pages/a/[all].tsx, so the order matters.

    The middleware-manifest.json should provide a sortedFunction field but doesn't.

    We should load route information from routes-manifest.json

    opened by zhuhaow 0
Owner
Wendell Misiedjan
Full-Stack Software Engineer
Wendell Misiedjan
A set of useful helper methods for writing functions to handle Cloudflare Pub/Sub messages (https://developers.cloudflare.com/pub-sub/)

pubsub A set of useful helper methods for writing functions to handle Cloudflare Pub/Sub messages. This includes: A isValidBrokerRequest helper for au

Cloudflare 18 Dec 4, 2022
Connect to a Postgres database from a Cloudflare Worker, using Cloudflare Tunnel

Cloudflare Workers Postgres Client This is an experimental module. Heavily based on cloudflare/worker-template-postgres, but cleaned up and bundled in

BubblyDoo 17 Dec 22, 2022
A flexible gateway for running ML inference jobs through cloud providers or your own GPU. Powered by Replicate and Cloudflare Workers.

Cogflare (Working title) Cogflare is a Cloudflare Workers application that aims to simplify running distributed ML inference jobs through a central AP

NightmareBot 14 Dec 12, 2022
Functional-style Cloudflare Durable Objects with direct API calls from Cloudflare Workers and TypeScript support.

durable-apis Simplifies usage of Cloudflare Durable Objects, allowing a functional programming style or class style, lightweight object definitions, a

Dabble 12 Jan 2, 2023
Use Cloudflare Pages Functions as a reverse proxy with custom domain support.

cf-page-func-proxy Use Cloudflare Pages Functions as a reverse proxy with custom domain support. Getting Start 1.下载或是Fork本仓库 2.修改_worker.js中的url.hostn

null 121 Dec 23, 2022
A Cloudflare Workers service that fetches and renders Notion pages as HTML, Markdown, or JSON.

notion-fetch A Cloudflare Workers service that fetches and renders Notion pages as HTML, Markdown, or JSON. Powered by Durable Objects and R2. Usage P

Heyang Zhou 7 Jan 6, 2023
A CloudFlare Worker / script / bot to sync Notion pages publicly as GitHub Discussions.

notion-github-sync This bot syncs public Notion pages as GitHub Discussions/Issues. It's done periodically, based on the pages shared with the Notion

The Guild 20 Dec 22, 2022
Example of a Cloudflare Pages server side rendering (SSR) project powered by Hono.

Hono SSR on Cloudflare Pages Example of a Cloudflare Pages server side rendered (SSR) project powered by Hono. This project demonstrates: Accessing en

Justin Noel 9 Nov 19, 2022
Remix run stack built for the edge (cloudflare pages and d1)

Remix Race Stack Learn more about Remix Stacks. npx create-remix@latest --template jose-donato/race-stack What's in the stack Cloudflare Pages for ho

null 120 Aug 10, 2023