Rewrites not working in dev server client side navigation in Next.js 12.2

Verify canary release

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

Provide environment information

    Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 21.5.0: Tue Apr 26 21:08:37 PDT 2022; root:xnu-8020.121.3~4/RELEASE_ARM64_T6000
    Binaries:
      Node: 16.13.2
      npm: 8.1.2
      Yarn: 1.22.15
      pnpm: 6.11.0
    Relevant packages:
      next: 12.2.1-canary.2
      eslint-config-next: 12.2.0
      react: 18.2.0
      react-dom: 18.2.0

What browser are you using? (if relevant)

Firefox 101.0.1

How are you deploying your application? (if relevant)

next dev

Describe the Bug

My app is multi-tenant with different content on different subdomains, so I use a rewrite in next.config.js to put the domain name into the path:

        rewrites: async () => {
            // In order to support multitenancy with Next.js, we use a "rewrite" to include the host in the path
            return {
                afterFiles: [
                    {
                        //source: '/:path*', <-- not working (won't match '/') due to https://github.com/vercel/next.js/issues/14930
                        source: '/:path*{/}?',
                        has: [
                            {type: 'host', value: '(?<siteHost>.*)'},
                        ],
                        destination: '/site/:siteHost/:path*',
                    },
                ],
                fallback: [
                    {
                        source: '/:path*{/}?',
                        has: [
                            {type: 'host', value: '(?<siteHost>.*)'},
                        ],
                        destination: '/site/:siteHost/fallback/:path*',
                    },
                ],
            };
        },

Then I have my app content in pages like pages/site/[siteHost]/index.tsx. This worked perfectly in Next.js through 12.1 but now when I am testing out 12.2, client-side (SPA) navigation in the dev server is broken. Every time I click on any <Link> on the site, I get a 404. However, if I then refresh the page to load it from the server, it works correctly.

In the JS console, I see 404 errors like this:

GET http://plantdb.local.neolace.net:5555/_next/data/development/en/site/plantdb.local.neolace.net.json?siteHost=plantdb.local.neolace.net
404 Not Found

When I downgrade to 12.1, I can see that the client-side navigation is fetching from the same URL without the query, and it works:

GET http://plantdb.local.neolace.net:5555/_next/data/development/en/site/plantdb.local.neolace.net.json

So I think the client-side code is correct, but on the server side it is not serving the JSON data at the correct path for some reason.

When I put this into my fallback handler:

export const getStaticProps: GetStaticProps<PageProps, PageUrlQuery> = async (context) => {
    console.log(`fallback, `, context);
    ...

then on 12.2 I can see that the rewrite is being applied twice to client-side navigation:

fallback,  {
  params: {
    siteHost: 'plantdb.local.neolace.net',
    origPath: [
      'site',
      'plantdb.local.neolace.net',
      'site',
      'plantdb.local.neolace.net'
    ]
  },
  locales: [ 'en', 'fr', 'ru' ],
  locale: 'en',
  defaultLocale: 'en'
}

Whereas if I directly navigate to a URL that will trigger the fallback, I can see it is only applied once:

fallback,  {
  params: {
    siteHost: 'plantdb.local.neolace.net',
    origPath: [ 'site', 'plantdb.local.neolace.net', 'foobar' ]
  },
  locales: [ 'en', 'fr', 'ru' ],
  locale: 'en',
  defaultLocale: 'en'
}

Expected Behavior

Client-side navigations work the same as server-side page loads.

Link to reproduction

https://github.com/bradenmacdonald/next122-rewrite-bug

To Reproduce

See the repro case repository included.

Run npm run dev then go to http://localhost:3000/

Follow the instructions.

Downgrading to 12.1 will make it work again.

[luukdv]

@ijjk I just upgraded from 12.1.6 to 12.2.6-canary.0, but https://github.com/vercel/next.js/issues/38338#issuecomment-1195232866 is still an issue. Would it be possible to re-open this issue?

[ijjk]

@luukdv please open a fresh issue with a reproduction with the latest version so we can investigate from there