Intercepting Routes doesn't works through rewrites

[woffpost]

Verify canary release

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

Provide environment information

Next.js 14.2.15 

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.0.0: Tue Sep 24 23:39:07 PDT 2024; root:xnu-11215.1.12~1/RELEASE_ARM64_T6000
  Available memory (MB): 16384
  Available CPU cores: 8
Binaries:
  Node: 22.7.0
  npm: 10.8.2
  Yarn: 1.22.19
  pnpm: N/A
Relevant Packages:
  next: 14.2.15 // Latest available version is detected (14.2.15).
  eslint-config-next: 14.2.13
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.6.3
Next.js Config:

Which example does this report relate to?

https://github.com/vercel/nextgram

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

Intercepting route does not work because the root goes through a rewrite

Expected Behavior

The intercepting route should work as specified in the documentation but through a rewrite.

To Reproduce

// next.config.js

async rewrites() {
  return [
      {
         source: "/:locale/:vacancy/:id",
         destination: "/:locale/vacancy/:id",
      }
   ]
}

app
   -- [locale]
      -- @modal
         -- (.)vacancy
            -- [id]
               -- page.tsx
      -- vacancy
         -- [id]
            -- page.tsx

[samcx]

@woffpost Can you clarify how exactly this is not working?

[woffpost]

@samcx The route is not being intercepted; instead of processing the @modal/vacancy component, the regular vacancy component is processed.

[FoxLess]

I have the same issue using middleware rewrites and the examples found for Parallel Routes -> Modals

Next.js v15.0.3

• app
  • // This one does not work (rewrite route):
  • %5Fws
  • @modal
    • (.)account
    • page.tsx
    • default.tsx
  • account
    • page.tsx
  • layout.tsx
  • page.tsx
  • // This his one works (main app route):
  • @modal
  • (.)account
    • page.tsx
  • default.tsx
  • account
  • page.tsx
  • layout.tsx
  • page.tsx

When on the page domain.com/ and click a <Link href="/account" /> the modal opens and the app/@modal/(.)account/page.tsx is rendered. (Works as intended)

When on the page foo.domain.com/ and click on a <Link href="/account" /> the modal does not open, and the app/%5Fws/account/page.tsx is rendered instead. (Works not as intended)

// middleware.ts

[...]
export async function middleware(request: NextRequest) {
    [...]

    // Rewrite subdomain to workspace route
    const { subdomain } = detectHost(requestHeaders);
    if(subdomain) {
        request.nextUrl.pathname = `/_ws/${removeSlashes(request.nextUrl.pathname)}`;
        return NextResponse.rewrite(request.nextUrl, {
            request: {
                headers: requestHeaders,
            },
        });
    }

    return NextResponse.next({
        request: {
            headers: requestHeaders,
        },
    });
}
[...]