payloadcms / payload

The best way to build a modern backend + admin UI. No black magic, all TypeScript, and fully open-source, Payload is both an app framework and a headless CMS.
https://payloadcms.com
MIT License
20.99k stars 1.26k forks source link

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

Open sebastianpulak opened 2 days ago

sebastianpulak commented 2 days ago

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: image

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).*)',
  ],
}
  1. Run yarn build && yarn serve
  2. 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