Nextjs 12 not firing _middleware.ts file when NextResponse.rewrite()

[drafenous]

Verify canary release

• I verified that the issue exists in Next.js canary release

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP Wed Mar 2 00:30:59 UTC 2022
Binaries:
  Node: 16.14.0
  npm: 8.5.1
  Yarn: 1.22.18
  pnpm: N/A
Relevant packages:
  next: 12.1.7-canary.5
  react: 17.0.2
  react-dom: 17.0.2

What browser are you using? (if relevant)

Chrome 101.0.4951.54

How are you deploying your application? (if relevant)

in futher i will use Vercel

Describe the Bug

I'm creating a multi-tenant app, and when I create a main middleware to redirect the host to _sites/[site] path, the _middleware.ts file inside _sites/[site] is not firing.

Making some tests, the problem is when I use a rewirte method.

Here's my code:

file: pages/_middleware.ts

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

export default function middleware(req: NextRequest) {
  const url = req.nextUrl.clone() // clone the request url

  const { pathname } = req.nextUrl
  // Get hostname (e.g. vercel.com, test.vercel.app, etc.)
  const hostname = req.headers.get('host')

  // If localhost, assign the host value manually
  // If prod, get the custom domain/subdomain value by removing the root URL
  // (in the case of "test.vercel.app", "vercel.app" is the root URL)
  const currentHost =
    process.env.NODE_ENV == 'production'
      ? hostname?.replace(`.telecodeapp.com`, '').replace(`.telecode.app`, '') // PUT YOUR DOMAIN HERE
      : hostname?.replace(`.localhost:3000`, '')

  // Prevent security issues – users should not be able to canonically access
  // the pages/sites folder and its respective contents. This can also be done
  // via rewrites to a custom 404 page
  if (pathname.startsWith(`/_sites`)) {
    return new Response(null, { status: 404 })
  }

  if (
    !pathname.includes('.') && // exclude all files in the public folder
    !pathname.startsWith('/api') // exclude all API routes
  ) {
    // rewrite to the current hostname under the pages/sites folder
    // the main logic component will happen in pages/sites/[site]/index.tsx
    url.pathname = `/_sites/${currentHost}${pathname}`
    return NextResponse.rewrite(url)
  }
}

file: /pages/_sites/[site]/_middleware.ts

import { NextFetchEvent, NextRequest, NextResponse } from 'next/server'

export async function middleware(req: NextRequest, ev: NextFetchEvent) {
  console.log('hi there!')
}

This second file is not firing.

Expected Behavior

Run middlewares inside _sites/[site] folder.

To Reproduce

Create these files:

file: pages/_middleware.ts

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

export default function middleware(req: NextRequest) {
  const url = req.nextUrl.clone() // clone the request url

  const { pathname } = req.nextUrl
  // Get hostname (e.g. vercel.com, test.vercel.app, etc.)
  const hostname = req.headers.get('host')

  // If localhost, assign the host value manually
  // If prod, get the custom domain/subdomain value by removing the root URL
  // (in the case of "test.vercel.app", "vercel.app" is the root URL)
  const currentHost =
    process.env.NODE_ENV == 'production'
      ? hostname?.replace(`.telecodeapp.com`, '').replace(`.telecode.app`, '') // PUT YOUR DOMAIN HERE
      : hostname?.replace(`.localhost:3000`, '')

  // Prevent security issues – users should not be able to canonically access
  // the pages/sites folder and its respective contents. This can also be done
  // via rewrites to a custom 404 page
  if (pathname.startsWith(`/_sites`)) {
    return new Response(null, { status: 404 })
  }

  if (
    !pathname.includes('.') && // exclude all files in the public folder
    !pathname.startsWith('/api') // exclude all API routes
  ) {
    // rewrite to the current hostname under the pages/sites folder
    // the main logic component will happen in pages/sites/[site]/index.tsx
    url.pathname = `/_sites/${currentHost}${pathname}`
    return NextResponse.rewrite(url)
  }
}

file: /pages/_sites/[site]/_middleware.ts

import { NextFetchEvent, NextRequest, NextResponse } from 'next/server'

export async function middleware(req: NextRequest, ev: NextFetchEvent) {
  console.log('hi there!')
}

And try to access any url inside /pages/_sites/[site] folder.

[icyJoseph]

Yeah, this is a bit odd. There was an open discussion here, without much conversation going on really, #36325.

In my case, I ended up using redirects and rewrites. I had a sub section of pages that didn't need rewrites, so I redirect to them, to trigger the middleware, at the price of unmasking the URL and triggering a page load on the client.

However, for this example https://github.com/vercel/examples/tree/main/edge-functions/hostname-rewrites, it is silently implied at the moment that there cannot be middleware further down.

Though, one could argue that you could still apply them from the top based on the path, but still, not good.

Would be nice to hear from the team about this.

[balazsorban44]

@icyJoseph is right, nesting Middlewares is being deprecated: #36772

We will upgrade our examples as well as the documentation, but as this behavior will change soon, I recommend making sure you upgrade your Middleware according to this: https://github.com/vercel/next.js/blob/56dc9e11848d1d32a9f6a9a3346aa51aef4a47da/errors/nested-middleware.md

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.