Multiple middleware functions

[seancwalsh]

I'm not sure if I'm missing something very obvious here... but I can't figure out how to run more than one middleware function. Is this supported?

[gerbyzation]

Got this question as well with the 12.2 release - would be great if a single request can be routed through multiple layers of middleware for separation of concerns

[icyJoseph]

I was a bit overwhelmed with multiple middleware, because of our app size, that I put everything in the top level one, from the very beginning. There I compose like and chain a few pieces of async work that ultimately, do rewrites, redirects, add, remove queries, and even add cookies to pass to the application, indicating bot presence etc...

[gerbyzation]

Having it in one place is fine, as you describe it's mainly about the composability, for which at the moment there is no standard API. I've written a function that takes multiple middleware functions (with the type signature as set by next) and composes them into a single middleware function. If anyone is interested let me know and I'll see if I can share it later after testing it a bit further

[icyJoseph]

Starting with next@12.2.0 there's only one top level middleware. So to OP's question, not anymore, it was only possible on a per level basis, but now it is all from the root in one single function/file.

[AlexVanHell]

I propose to provide a compose function very similar to what koa-compose does

export type EdgeMiddlewareNextFunction = () => Promise<NextResponse> | NextResponse;
export type EdgeMiddleware = (
  req: NextRequest,
  ev: NextFetchEvent,
  next: EdgeMiddlewareNextFunction
) => Promise<NextResponse> | NextResponse;

export const compose = (...middleware: EdgeMiddleware[]) => {
  return async (req: NextRequest, ev: NextFetchEvent): Promise<NextResponse> => {
    let index = -1;

    const dispatch = async (i: number): Promise<NextResponse> => {
      if (i <= index) throw new Error('next() called multiple times');

      index = i;

      let fn = middleware[i];

      if (i === middleware.length) {
        fn = () => NextResponse.next();
      }

      if (!fn) return NextResponse.next();

      return fn(req, ev, () => dispatch(i + 1));
    };

    return dispatch(0);
  };
};

[chibuike-19]

Hey @AlexVanHell , is it possible for you to share a code snippet of how this could be used
i'm writing my api in nextjs and i'm wondering if this would work for using multiple middlewares for that