Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
sebastianpulak opened this issue Jun 26, 2024 · 1 comment
Labels
status: needs-triage Possible bug which hasn't been reproduced yet v2

Comments

@sebastianpulak
Copy link

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

@sebastianpulak sebastianpulak added status: needs-triage Possible bug which hasn't been reproduced yet v2 labels Jun 26, 2024
@omonina
Copy link

omonina commented Jul 4, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
status: needs-triage Possible bug which hasn't been reproduced yet v2
Projects
None yet
Development

No branches or pull requests

2 participants