Issue with multiple middleware chain

[temito93]

Description

Hi,
Im having an issue with using multiple middleware's and chaining them.
The problem is that if next-intl middleware is first in chain and i have other middlewares after next-intl, other middleware's arent running.

//This is my chain.ts file:
import { NextMiddleware, NextResponse } from 'next/server';

type MiddlewareFactory = (middleware: NextMiddleware) => NextMiddleware;

export function chain(
  functions: MiddlewareFactory[],
  index = 0
): NextMiddleware {
  const current = functions[index];

  if (current) {
    const next = chain(functions, index + 1);
    return current(next);
  }

  return () => NextResponse.next();
}

//This is my authCheckMiddleware.ts:

import {
  NextFetchEvent,
  NextMiddleware,
  NextRequest,
  NextResponse,
} from 'next/server';
import { AUTH_ROUTES, PUBLIC_ROUTES } from '../config/routes';

export function authCheckMiddleware(middleware: NextMiddleware) {
  return async (request: NextRequest, event: NextFetchEvent) => {
    const cookies = request.cookies.getAll();
    const authToken = cookies.some((cookie) => cookie.name === 'auth');

    const { pathname } = request.nextUrl;

    for (const auth of AUTH_ROUTES) {
      if (pathname.includes(auth) && !authToken) {
        return NextResponse.redirect(new URL('/login', request.url));
      }
    }

    for (const guest of PUBLIC_ROUTES) {
      if (pathname.includes(guest) && authToken) {
        return NextResponse.redirect(new URL('/dashboard', request.url));
      }
    }

    return middleware(request, event);
  };
}


//This is nextIntlMiddleware.ts file: 


import createMiddleware from 'next-intl/middleware';

export function nextIntlMiddleware() {
  return createMiddleware({
    locales: ['en', 'ka'],
    defaultLocale: 'ka',
    localeDetection: false,
    localePrefix: 'always',
  });
}


///And my root middleware.ts file:


import {
  authCheckMiddleware,
  chain,
  nextIntlMiddleware,
} from 'middlewares';


const middlewares = [nextIntlMiddleware, authCheckMiddleware];

export default chain(middlewares);

export const config = {
  matcher: ['/((?!api|_next|_vercel|.*\\..*).*)'],
};


//authCheckMiddleware is not running because nextIntlMiddleware needs to be returned. I need both middlewares to //run on every route or request.

//in nextIntlMiddleware.ts i tried this:


import { NextFetchEvent, NextMiddleware, NextRequest } from 'next/server';
import createMiddleware from 'next-intl/middleware';

export function nextIntlMiddleware(middleware: NextMiddleware) {
  const intlMiddleware = createMiddleware({
    locales: ['en', 'ka'],
    defaultLocale: 'ka',
    localeDetection: false,
    localePrefix: 'always',
  });

  return async (request: NextRequest, event: NextFetchEvent) => {
    intlMiddleware(request);
    return middleware(request, event);
  };
}

but it's not working because intlMiddleware needs to be return to work and i don't know how to return both intlMiddleware and middleware parameter

Verifications

• I've verified that the problem I'm experiencing isn't covered in the docs.
• I've searched for similar, existing issues on GitHub and Stack Overflow.
• I've compared my app to a working example to look for differences.

Mandatory reproduction URL

https://example.com

Reproduction description

Steps to reproduce:

1. Open reproduction
2. Click on …
3. See error: …

Expected behaviour

I want to run multiple middlewares in nextjs 14 with next-intl

[amannn]

Moving this to a discussion since it's a usage question …