Next.js Middleware not working in Custom Server example after build process

[sebastianpulak]

Link to reproduction

No response

Describe the Bug

I've cloned a ecommerce template (https://github.com/payloadcms/payload/tree/main/templates/ecommerce) to start working on a Next.js project. When I added a simple middleware as you often do in Next.js applications, it only runs on development using yarn dev but after building the project using yarn build && yarn serve it no longer works - it's not fired.

My middleware.ts file is placed inside /src folder and looks like this:

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

// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
export function middleware(request: NextRequest) {
  // eslint-disable-next-line no-console
  console.log('middleware hit: ', request.url)
  return NextResponse.next()
}

export const config = {
  matcher: [
    '/((?!api|_next/static|_next/image|favicon.ico|favicon.svg|icon.png|sitemap.xml|robots.txt).*)',
  ],
}

Development:

After building the project it no longer fires (console.log is not visible).

Any idea how to make middleware work with Custom server?

To Reproduce

1. Clone the ecommerce template https://github.com/payloadcms/payload/tree/main/templates/ecommerce by running command npx create-payload-app@latest my-project -t ecommerce
2. Add a middleware.ts file inside src/ folder (same level as server.ts file) with following content:

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

// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
export function middleware(request: NextRequest) {
  // eslint-disable-next-line no-console
  console.log('middleware hit: ', request.url)
  return NextResponse.next()
}

export const config = {
  matcher: [
    '/((?!api|_next/static|_next/image|favicon.ico|favicon.svg|icon.png|sitemap.xml|robots.txt).*)',
  ],
}

3. Run yarn build && yarn serve
4. Visit http://localhost:3000

You won't be able to see a console.log inside a middleware file as opposite to running a project by yarn dev

Payload Version

2.22.0

Adapters and Plugins

No response

[omonina]

I am coping with similar thing. Support - any luck with reproducing this issue?

[denolfe]

@sebastianpulak Looking into recreating this issue now.

[denolfe]

I was able to recreate this issue but have not been able to pinpoint a cause. A blank Next.js app of the same version does not have this issue. It likely has something to do with how we are invoking the nextBuild command.

[MauriceMarkslag]

@denolfe Hey Elliot, has there been any progress/updates regarding this issue? We are running into the exact same problem. Thanks in advance!

[r1tsuu]

Pretty sure it's the same problem as here - https://github.com/payloadcms/payload/issues/3653, just for the ecommerce template. You need to change this line https://github.com/payloadcms/payload/issues/3653

[JarrodMFlesch]

@sebastianpulak I believe the fix that was used to fix #3653 should also fix your issue like @r1tsuu said.

[github-actions[bot]]

This issue has been automatically locked. Please open a new issue if this issue persists with any additional detail.