Modify request objects within middleware function

[dhaniboy09]

I'm learning about the new middleware feature in Nextjs 12. One thing I've been unable to figure out is modifying request objects within a middleware. Is this currently possible? For example, If I want to append a custom header to all apis, can I have a middleware that appends this custom header to the request object before it gets to the API? For this use case, the value of the header is within the request object so middleware seems like a good solution. I've tried the following, which doesn't work (I think this approach usually works with express):

import { NextResponse, NextRequest } from 'next/server'

export function middleware(req: NextRequest) {
  req.headers.append('x-custom-header', '123');
  NextResponse.next();
}

[SerenModz21]

this might help u:
https://github.com/leerob/leerob.io/blob/main/pages/_middleware.ts#L16-L35

[lildogi]

same problem

[bradleyGamiMarques]

What seems to be the issue? I replicated OP's code on my local and did a console.log of the req.headers object. I found that the header was present on each request that I made to the server.

[pixelhuh]

What seems to be the issue? I replicated OP's code on my local and did a console.log of the req.headers object. I found that the header was present on each request that I made to the server.

Now try checking headers in your browser

[bradleyGamiMarques]

What seems to be the issue? I replicated OP's code on my local and did a console.log of the req.headers object. I found that the header was present on each request that I made to the server.

Now try checking headers in your browser

Ah yeah, the header that shows up in the terminal as part of the console.log does not show up in the browser. Testing with Chrome 98 on Mac OS.

[devmotheg]

I don't think they'll be adding this, it's been a while since this was issued :(

[jrnxf]

Would also love to know if this is possible. Given the lack of communication I'm guessing it's a no?

[johnsardine]

I realised I just submitted the same request here #33199

[pixelhuh]

I think the ability to change request headers fits harmoniously into the _middleware.
This is the first place where I intuitively wanted to change the headers for my needs.

[plmercereau]

I found a workaround, but not at all satisfying:

Add the required data to the headers in the middleware, then when in your API route or getServerSideProps, call res.removeHeader('my-header'). The (big) tradeoff is that you'll have to make sure the middleware is only called on the same routes. If you miss a route, the header will be sent to the client.

It would be possible to somehow secure the approach in encrypting/decrypting the header between the middleware and the api/component, but it seems all very scrappy, as an unnecessary header will still be send back to the client...

Any plan to allow modifying the request as per the initial suggestion?

[julianpoma]

[pixelhuh]

You are trying to change the response header instead of the request header, if this is what you need you can try use this:

https://nextjs.org/docs/advanced-features/security-headers

[julianpoma]

You are right ! 👍🏻

[anthonyalayo]

I ended up here from Google after being confused why I couldn't set additional values on the request object. I feel like this would be a standard use case. Could this get more eyes from the team?

[bsord]

Landed here for the same desire. Please implement a reasonable way to modify the req object via middleware on api routes.

[dangayle]

Without this feature, we're forced to use a custom server, which we've been trying to avoid. If you can't modify the request, what even is the point of the middleware?

[jeffreylo]

If you can't modify the request, what even is the point of the middleware?

While you do have a point with request modification, modifying the response has merit already.

[spacestierman]

Funny that in 12.2 Next.js is removing the ability to write the response body in middleware as well. The number of things Next.js is allowing us to do in middleware is shrinking.

[liranelisha]

my team ended up using regular server but adding our own middleware instead of custom server.
we did that because that even when using custom server there was no way to do error handling middleware (the next.js handle function swallow errors). we will probably use some pre-commit git tool to enforce it.
just in case you wanted another idea

[swcarter007]

I agree with the suggestions. I have a use case where I want to apply a header from our nextjs backend to pass to our separate enterprise api. The client should never know this header was added. In other cases I may want to have the header added and then pass it to the backend but also through to the front end for tracking purposes.

As a separate question, is there a mechanism to enforce middleware execution order? Having a config to do it would be nice, but I imagine a fallback that probably would work is to name the middleware in alphabetical order.

1-middleware.js
2-middleware.js
...

[YannHulot]

Commenting here as well for posterity.

I want to use the middleware so that I don't have to refetch everything in each getServerSideProps on each and every page .

If a user is logged in, append it to the context of the request, find the user permissions, add any other data necessary, make any requests needed, then in getServerSideProps this data can be retrieved from the context object and there is no need to refetch it at all.

[jcsturges]

Yes! With express we can utilize res.locals and extend it with whatever we want for any state within the request. Exactly the same use case - validate a user once, use user data attributes anywhere. +1

As of now we’ve had to implement a custom server to handle this. Not ideal but gets the job done.

[deiay]

Another hacky work around we ended up doing to set headers on the response. We're using higher order functions to provide additional context to the response object. I imagine you could do this to add locals to the request object too. However, note that this does not make use of next middleware.

Here's an example:

// utils/cookies.ts
import { NextApiRequest, NextApiResponse } from 'next'

type CookieFn = (...) => void

type NextServerFunction = (
	req: NextApiRequest,
	res: NextApiResponse
) => Promise<void>

export type NextApiResponseWithCookie = NextApiResponse & { cookie: CookieFn }

type NextServerFunctionWithCookie = (
	req: NextApiRequest,
	res: NextApiResponseWithCookie
) => Promise<void>

type WithCookiesComposer = (
	handler: NextServerFunctionWithCookie
) => NextServerFunction

const cookie = (res, ...) => {	// adds cookies to response header }

export const withCookies: WithCookiesComposer = (handler) => (req, res) => {
	Object.assign(res, {
		cookie: ((...cookieAttributes) => {
			cookie(res, ...cookieAttributes)
		}) as CookieFn,
	})
	return handler(req, res as NextApiResponseWithCookie)
}

And then in our our api file we can call

const hander: NextServerFunctionWithCookie = (res, res) => {
  // we have access to cookie here
 res.cookie(title: 'my_cookie', value: '123')
}

export default withCookies(handler)

[anthonyalayo]

Looks like this is now available with the latest release?
https://nextjs.org/docs/messages/middleware-upgrade-guide#no-response-body

Edit: I just tried out the latest release, and it still doesn't work (despite saying it should).

This is what I tried out:

export function middleware(request: NextRequest) {
    request.headers.set('hi', 'friends')
    request.cookies.set('bye', 'pals')
    return NextResponse.next()
}

export const config = {
    matcher: ['/api/:path*'],
}

Yet the upstream route had neither the cookie nor the header.

[liranelisha]

i tried this as well (for the headers), but i didn't get to the handlers

[saeedjamshidi]

I use something like this to add device type to header:

middleware.ts

const middleware = async (req: NextRequest) => {
  const { device } = userAgent(req)
  const deviceType = device.type === 'mobile' ? 'mobile' : 'desktop'
  const response = NextResponse.next()
  response.headers.append('device-type', deviceType)

  return response
}

pages/index.tsx

export const getServerSideProps = async context => {
  const deviceType = context.res.getHeaders()['device-type']

  return {
    props: {
      deviceType
    }
  }
}

[s-titov]

Any news? I want to add authorization header (from http-only cookie) before api requests and middleware seems good for this 🤔

[AaronBeaudoin]

I hate myself for trying to figure out why I couldn't get this working for the last 3 days, then finding this thread. FML. 🤦‍♂️

Gonna leave my separate discussion (vercel/#8487) open, since it seems this is not a Next.js issue but rather just an implementation oversight in Vercel's edge middleware.

Overall, I couldn't agree more that this is one of the biggest things I'd intuitively expect to be able to do with middleware; without it edge middleware feels essentially like writing config.json#routes rules with added support for pre-school level logic.

[leerob]

This is not accurate. This is a Next.js issue and unrelated to Vercel's infrastructure.

[stefanullinger]

Hi, as I also was not able to add something to the NextRequest object from the middleware.ts file, I was following the docs and example to set up a custom express server.

The example seems to be a bit out-of-date as it was missing the port and hostname, but I managed to get it running like this:

const express = require("express");
const next = require("next");
const bodyParser = require("body-parser");
const userMiddleware = require("./src/middlewares/express/userMiddleware");

const hostname = "localhost";
const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV !== "production";
const app = next({ dev, hostname, port });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();

  server.use(bodyParser.urlencoded({ extended: true }));
  server.use(bodyParser.json());

  server.use("/api/*", userMiddleware);

  server.all("*", (req, res) => {
    return handle(req, res);
  });

  server.listen(port, () => {
    console.log(`> Ready on http://localhost:${port}`);
  });
});

My ./src/middlewares/express/userMiddleware file looks like this:

module.exports = async function userMiddleware(req, res, next) {
  req.user = {
    id: 123,
    email: "..."
  };

  return next();
};

I also needed to extend the express Request object type in the additional.d.ts file

import { User } from "./src/models";

declare module "next" {
  interface NextApiRequest {
    user?: {
      id: number;
      email: string;
    };
  }
}

// If this file has no import/export statements (i.e. is a script)
// convert it into a module by adding an empty export statement.
export {};

Now, I am able to get the user from the Request object.

// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import type { NextApiRequest, NextApiResponse } from "next";

export default async function handler(req: NextApiRequest, res: NextApiResponse<any>) {
  console.log(req.user);
  
  return res.status(200).json({ status: "ok" });
}

[stefanullinger]

Just saw the notice in the docs:

Note: A custom server cannot be deployed on Vercel.

and also

Before deciding to use a custom server, please keep in mind that it should only be used when the integrated router of Next.js can't meet your app requirements. A custom server will remove important performance optimizations, like serverless functions and Automatic Static Optimization.

So I guess my solution might not help everybody.

[johann-taberlet]

I'm also facing the same issue when I try to decrypt my cookie before sending the request to the api.
I would love to have a viable solution to this but as a workaround, someone described a solution in the related issue.
For me it worked but it's a bit complicated for a simple behavior...

[anthonyalayo]

Looks like we finally got the feature!

#41380

There's a bug being addressed, but I'm very happy.

[IlirBajrami]

How can we modify the whole request and not only headers? I need to add the requested file upload then read it's properties on my API route.

[Yigitali97]

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  // Clone the request headers
  // You can modify them with headers API: https://developer.mozilla.org/en-US/docs/Web/API/Headers
  const requestHeaders = new Headers(request.headers)

  // Add new request headers
  requestHeaders.set('x-hello-from-middleware1', 'hello')
  requestHeaders.set('x-hello-from-middleware2', 'world!')

  // Update an existing request header
  requestHeaders.set('user-agent', 'New User Agent overriden by middleware!')

  // Delete an existing request header
  requestHeaders.delete('x-from-client')

  // You can also set request headers in NextResponse.rewrite
  return NextResponse.next({
    request: {
      // New request headers
      headers: requestHeaders,
    },
  })
}

Source: https://vercel.com/templates/next.js/edge-functions-modify-request-header

[ysazak]

@Yigitali97 , if I add a cookie to response, how can I do NextResponse.next with that response object?

export async function middleware(req: NextRequest) {

  let requestHeaders = new Headers(req.headers)
  requestHeaders.set('x-test', 'test');

  const res = NextResponse.next();
  res.cookies.set('test2', 'value'); //THIS DOESN'T GO TO CLIENT

  return NextResponse.next({
    request: {
      headers: requestHeaders,
    },
  })```

[usmanchaudhryme]

@IlirBajrami, @bsord, @anthonyalayo I implemented the request object changes like this, it may not be the safest but still works like charm. It would be interesting to see how you guys ended up implementing this. Do share if you've done it.

utils/interceptors.ts

import { NextApiHandler, NextApiRequest, NextApiResponse } from "next"

export type NextApiRequestWithLocals = NextApiRequest & {
  locals?: ({
    z?: string,
    dbConnection?: string,
  })
}

export function withZod(handler: NextApiHandler){
  return (req: NextApiRequestWithLocals, res: NextApiResponse) => {
      req.locals = {
          ...req.locals,
          z: "z",

      }
      return handler(req, res)
  }
}

export function withDb(handler: NextApiHandler){
  return (req: NextApiRequestWithLocals, res: NextApiResponse) => {
      req.locals = {
          ...req.locals,
          dbConnection: "dbConnection",
      }
      return handler(req, res)
  }
}

pages/api/hello.ts

import { NextApiRequestWithLocals, withDb, withZod  } from '@/utils/interceptors'
import type { NextApiResponse } from 'next'

function handler(
  req: NextApiRequestWithLocals,
  res: NextApiResponse
) {
  res.status(200).json({ name: 'John Doe', ...req.locals })
}

export default withDb(withZod(handler))

[noonenesh]

What should I do if I want to attach an object ? I ended up with the hacky solution, not sure this is the right way to do it

import verifyToken from "@/lib/utils/verifyToken";
import type { NextApiRequest, NextApiResponse } from "next";
import { DecodedIdToken } from "firebase-admin/auth";

type NextApiHandlerWithUserInfo = (
  req: NextApiRequest,
  res: NextApiResponse,
  user: DecodedIdToken
) => unknown | Promise<unknown>;

const withProtectApi =
  (handler: NextApiHandlerWithUserInfo) =>
  async (req: NextApiRequest, res: NextApiResponse) => {
    const token = req.headers.authorization;
    if (!token) {
      res.status(401).json({
        error: "Unauthorized",
      });
      return;
    }
    const firebaseUserInfo = await verifyToken(token);
    if (!firebaseUserInfo) {
      res.status(401).json({
        error: "Unauthorized",
      });
      return;
    }
    return handler(req, res, firebaseUserInfo);
  };

export default withProtectApi;

And from api

const handler = async (
  req: NextApiRequest,
  res: NextApiResponse<Data>,
  firebaseUserInfo: DecodedIdToken
) => {
  // handle the GET request
  console.log("Incoming request: ", req.firebaseUserInfo);
};

export default withProtectApi(handler);

[luthfikhan]

You can try this

export function middleware(req: NextRequest) {
  req.headers.set('x-custom-header', '123');
  return NextResponse.next({
    request: req,
  });
}

[cyco130]

I just discovered that if you call fetch from an edge middleware, it goes directly to the serverless, allowing you to change the request and response as you like:

export async function middleware(req) {
 const originResponse = await fetch(req.url, { /* Change whatever you want here */ });
 return originResponse; // Or change anything before returning 
}

Note: I haven't tried it on Next, I'm using a custom framework with the Build Output API.

[blackblue2712]

Just figure out that we can use express in API folder: https://vercel.com/guides/using-express-with-vercel#standalone-express

Notice that we need to rewrites route

async rewrites() { return [ { source: "/api/(.*)", destination: "/api" }, ]; },