Passing data from middleware to API route

[arthurnick11]

Hello,

I'd like to pass data from middleware to API route (eg. authenticated user) like this:

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

export async function middleware(req: NextRequest) {
  req.locals.userId = 'nickarthur11';
  return NextResponse.next();
}

and access it in my API route like this:

import type { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  console.log(req.locals.userId);
}

Is that possible in Next.js? If not, at least a "hack" way?

[arthurnick11]

bump

[musasoftlabx]

was a solution to this found?

[CanRau]

Also liked a similar concept in SvelteKit event.locals you can define in server hooks and then access basically everywhere (docs)

Would be actually incredible to be able to define this e.g. in middleware and access in route handlers and server components.

To me this makes nice dependency injection instead of heaving to rely on a sthg like a singleton for database or other connections and explaining typescript that it's not undefined as it was connected somewhere else, you just "pass it down"

Or is there other patterns for this I'm missing?

[CanRau]

general server components is probably tricky because of streaming etc but at least the default export of a page.tsx, route handlers and maybe server-only layout.tsx should be able to access those locals

Might also be interesting to have colocated page-level middleware kinda as loaders or something like a loader export in page.tsx & layout.tsx

[hansottowirtz]

An ugly workaround is to set cookies on the cloned request and to then access them using cookies() in the layout/page:

Middleware:

const clonedRequest = request.clone();
clonedRequest.headers.append('Cookie', `locale=${locale}`);
// set cookies on cloned request so they are available with cookies() on first load
const response = NextResponse.rewrite(url.toString(), { request: clonedRequest });
return response;

Layout/Page:

export default function Page() {
  const locale = cookies().get('locale')?.value;
}

We do this in production, no issues so far, but a better technique would be welcome.