Situation: I want to record the requests my NextJS application is making.

Where for a straight client-side SPA I could use the network tab of the developer dev tools to generate a HAR file:

For an application that involves SSR and RSCs, it's not quite this simple - as some of those requests may be made on the server side - and be returning the rendered HTML to the browser.

The solution I've opted to investigate is using the tool mitmproxy, we proxy our requests through mitmproxy and and use that to record a HAR file.

There are four kinds of requests we need to handle

I have a sample application set up at this repository here.

The application requests data in various forms from the jsonplaceholder API.

There are four kinds of requests we need to handle.

Straight client side requests

https://github.com/dwjohnston/nextjs-proxying/blob/a7349693e1a8bd6e8d29800be64755062f86a070/src/components/ComponentFetch.tsx#L1-L15

Unauthorized. Is your Github token valid?

This is the most basic, and this doesn't require special NextJS configuration - the request to jsonplaceholder is made directly from the browser, and if our browser is configured to use a proxy those requests will indeed be proxied.

Client side requests with rewrites

https://github.com/dwjohnston/nextjs-proxying/blob/a7349693e1a8bd6e8d29800be64755062f86a070/src/components/ComponentFetchRelative.tsx#L1-L13

Unauthorized. Is your Github token valid?

In this scenario we request the data via a relative path, and we configure NextJS to rewrite the request in the next.config.js file:

https://github.com/dwjohnston/nextjs-proxying/blob/a7349693e1a8bd6e8d29800be64755062f86a070/next.config.mjs#L7-L16

Unauthorized. Is your Github token valid?

In this case the browser proxy configuration is not able to proxy these requests - as the requests are made to application server which is doing the requests on the browsers behalf.

Server side requests - with native fetch

https://github.com/dwjohnston/nextjs-proxying/blob/a7349693e1a8bd6e8d29800be64755062f86a070/src/app/page3/page.tsx#L5-L16

Unauthorized. Is your Github token valid?

In this scenario the request is made on the server as a RSC. We need a way to instruct our application to proxy these requests via our proxy.

Server side requests - with node-fetch

https://github.com/dwjohnston/nextjs-proxying/blob/0bb4f13f98c2b5a6c51cac59669736f1a5f982ed/src/app/page6/page.tsx#L1-L15

Unauthorized. Is your Github token valid?

This is the same scenario but we're using node-fetch instead of native fetch.

Solution - use a secondary proxy

The best solution I've found is to add your own secondary proxy, and have it proxy its traffic through your target proxy.

Create a proxy server with this script:

Update your requests, whether they're are server side requests or rewrites to reference an environment variable as the upstream.

Start both your secondary proxy and NextJS application with the NODE_EXTRA_CA_CERTS env var provided.

Here you can see mitmproxy recording my requests!

Alternative solutions

If the secondary proxy approach doesn't work for you, you can configure the proxying of your http client (eg. fetch or node-fetch) directly. See my post here for details.

Questions? Comments? Criticisms? Get in the comments! 👇