Set custom header so i can access it in getServerSideProps to get csrf token | Next.js | Page 1

I would like to fetch scrf_tken from my laravel api in middleware, and pass it down to app. I was thinking about setting new custom header and accessing it in the getServerSideProps but that does not seem to work. Does anyone has any ideas how this could be done ? This is my code:

export async function middleware(request) {
const csrfToken123 = await fetchCsrfToken();

// @todo figure out a way of setting headers for request
// @todo we want to set the csrfToken there so it can be accessed in the getServerSideProps
const requestHeaders = new Headers(request.headers)

requestHeaders.set('x-hello-from-middleware1', 'hello')

let response = NextResponse.next({
    request: {
      // New request headers
      headers: requestHeaders,
    }
  });

response =  await middlewareHandleSubdomainsPathSet(request, response);
response =  await protectUnAuthenticatedPagesMiddleware(request, response);

return response;

}

and the getServerSideProps:
export const getServerSideProps = async (context) => {
const {req, res, query} = context;
console.log({'headers req': req.headers})
console.log({'headers 2': res})
});

Thanks

#Set custom header so i can access it in getServerSideProps to get csrf token