middleware (stable version) matcher conflict with some rewrites/redirects

[cvolant]

Verify canary release

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

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #49-Ubuntu SMP Thu Aug 4 18:03:25 UTC 2022
Binaries:
  Node: 14.17.0
  npm: 6.14.13
  Yarn: 1.22.17
  pnpm: N/A
Relevant packages:
  next: 12.2.5
  eslint-config-next: N/A
  react: 17.0.2
  react-dom: 17.0.2

What browser are you using? (if relevant)

Firefox Developer Edition 98.0b10 - Firefox 97.0.2 - Chromium 99.0.4844.51

How are you deploying your application? (if relevant)

yarn dev OR yarn build && yarn start

Describe the Bug

Here is my next config:

{
  i18n: {
    locales: ['en', 'fr'],
    defaultLocale: 'en',
  },

  async redirects() {
    return [    
      {
        source: '/fr/about',
        destination: '/fr/a-propos',
        locale: false,
        permanent: false,
      },
    ]
  },
  async rewrites() {
    return {
      beforeFiles: [
        {
          source: '/a-propos',
          destination: '/about',
        },
      ],
    }
  },
}

Without any middleware, or with a middleware without matcher config, everything works as exected.

But if I add this config, { matcher: ['/about'] } to the middleware, then the /fr/a-propos page is broken on CSR: the props from getStaticProps are not received by the page because there is a wrong redirection, from /_next/data/development/fr/about.json to /fr/a-propos.

Expected Behavior

The middleware should not conflict with the rewrites/redirects.

Link to reproduction

Repo Github
Repo on CodeSandbox
CodeSandbox deployment

To Reproduce

1. Open the provided reproduction
2. Install the dependencies: yarn install
3. Run with either yarn dev or yarn build && yarn start
4. Visit http://localhost:3000/
5. Follow the guided visit, or...
6. Open the network tab of your browser
7. Click the Visit /fr/a-propos link
8. See that the props from getStaticProps are empty
9. See that there is a weird redirection from /_next/data/development/fr/about.json to /fr/a-propos.

[cvolant]

Up. 🙂

[cvolant]

According to @mlake (here), using Vercel, the issue happens even with a very simple middleware without any matcher...

If I use the following super-simple do-nothing middleware (no matchers or anything), there's no problem running locally (either dev or next build + next start)...BUT if I deploy this same middleware to Vercel, the pageProps are empty and I get client-side exception on my translated routes. frown emoji. sigh emoji.
without any middleware, the translated routes are fine.

// middleware.ts

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

export function middleware(request: NextRequest) {
    return
}

[ristomatti]

Any chance PR #45504 would relate to this?

[cvolant]

Yes, you are right, thanks. I cannot reproduce the full bug with canary version.
There is still a bug though : the following redirect also affects prefetches.

async redirects() {
    return [    
      {
        source: '/fr/about',
        destination: '/fr/a-propos',
        locale: false,
        permanent: false,
      },
    ]
  },

So /_next/data/weodsfds_someid_dfslfjds/fr/about.json is redirected toward /fr/a-propos, and it should probably not, or should it?

[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.