I'm using Next.js v9 and would like to take advantage of Next's serverless deployment option by using my application with Cloudflare Workers.

From the Next.js docs, I know that every serverless function created by Next has the following signature:

export function render(req: http.IningMessage, res: http.ServerResponse) => void

When using Node's http.Server class (using express for example), passing in the req and res object bees trivial and there is an example shown in the docs of doing this.

However, the issue is that Cloudflare Workers use a different Request and Response object than Next expects. The docs for their Request object can be found here and the docs for their Response object can be found here.

So while a simple "hello world" app running on Cloudflare Workers looks like this:

// 1. Register a FetchEvent listener that sends a custom
//    response for the given request.
addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

// 2. Return a custom request object
async function handleRequest(request) {
  return new Response('hello world')
}

and rendering a simple Next.js function might look something like this:

const page = require('./.next/serverless/pages/some_page.js');

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  return page.render(request, new Response());
}

there is an inherent mismatch between the resuest and response types so I suspect errors will be thrown.

I know that I need to modify these so that they're passed in as Next.js expects. I know that the Worker's Request object can be modified as seen here. But I'm unsure of how exactly to make it match with the http.IningMessage object. And I'm not sure on how to format the Response object either. Any thoughts?

Thank you

I'm using Next.js v9 and would like to take advantage of Next's serverless deployment option by using my application with Cloudflare Workers.

From the Next.js docs, I know that every serverless function created by Next has the following signature:

export function render(req: http.IningMessage, res: http.ServerResponse) => void

When using Node's http.Server class (using express for example), passing in the req and res object bees trivial and there is an example shown in the docs of doing this.

However, the issue is that Cloudflare Workers use a different Request and Response object than Next expects. The docs for their Request object can be found here and the docs for their Response object can be found here.

So while a simple "hello world" app running on Cloudflare Workers looks like this:

// 1. Register a FetchEvent listener that sends a custom
//    response for the given request.
addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

// 2. Return a custom request object
async function handleRequest(request) {
  return new Response('hello world')
}

and rendering a simple Next.js function might look something like this:

const page = require('./.next/serverless/pages/some_page.js');

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  return page.render(request, new Response());
}

there is an inherent mismatch between the resuest and response types so I suspect errors will be thrown.

I know that I need to modify these so that they're passed in as Next.js expects. I know that the Worker's Request object can be modified as seen here. But I'm unsure of how exactly to make it match with the http.IningMessage object. And I'm not sure on how to format the Response object either. Any thoughts?

Thank you

• javascript
• node.js
• reactjs
• next.js
• cloudflare-workers

• This will be plicated. ReadableStreams and NodeJS Readables are pletely different internally. The list goes on with other implementations. So filling the gap here will be a lot of work. I guess its way easier to rework the routing ... – Jonas Wilms Commented Dec 2, 2019 at 6:54
• Yeah it looks that way. But could clarify what you mean by "rework the routing"? – mrstack999 Commented Dec 2, 2019 at 7:00
• Well, don't use NextJS. – Jonas Wilms Commented Dec 2, 2019 at 7:02

2 Answers 2

What you're aiming to do is replicate the API for the Node.js http module which provides http.IningMessage and http.ServerResponse. That seems like a monumental undertaking that, in some ways, defeats the purpose of working with Cloudflare Workers which are modeled on the Service Worker API. Instead, consider dropping Next.js for a Cloudflare Workers-specific approach to SSR for React, as Cloudflare demonstrates here.

You can try to mimic the response object like this.

        const page = require('./.next/serverless/pages/some_page.js');

        addEventListener('fetch', event => {
            event.respondWith(handleRequest(event.request))
        })

        async function handleRequest(request) {
            return new Promise((resolve) => {
                const response = {
                    setHeader: () => {},
                    getHeader: () => {},
                    end: (htmlString) => {
                        resolve(htmlString);
                    },
                };
                page.render(request, response);
            });
        }