Issue with dynamic segment in Middleware and NextConfig using trailingSlash: true

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 23.0.0: Fri Sep 15 14:41:34 PDT 2023; root:xnu-10002.1.13~1/RELEASE_ARM64_T8103
  Available memory (MB): 8192
  Available CPU cores: 8
Binaries:
  Node: 20.12.2
  npm: 10.5.0
  Yarn: 1.22.22
  pnpm: N/A
Relevant Packages:
  next: 14.2.15 // Latest available version is detected (14.2.15).
  eslint-config-next: 14.2.15
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.6.3
Next.js Config:
  output: N/A

Which example does this report relate to?

Custom Next.js configuration using middleware with trailingSlash: true and generateBuildId

What browser are you using? (if relevant)

Browser: Chrome 117.0.5938.132

How are you deploying your application? (if relevant)

next start (local development)

Describe the Bug

I realized that
when generateBuildId contains the character "/",
for example, "release/example1",
it will cause error. I hope this helps.

When using Next.js with the following configuration:
const nextConfig = { trailingSlash: true, generateBuildId: () => "release/v1", };
The initial page load at http://localhost:3000/product/1234/?Page=2 (with seriesCode being part of the dynamic route /product/[seriesCode]/?Page=2) works as expected, with seriesCode correctly set to 1234.

However, when clicking a link that navigates to another product page such as http://localhost:3000/product/5678/?Page=2 from within the current page, the seriesCode is not passed or recognized, and only the Page=2 parameter is retained.

Expected Behavior

Upon navigating to a new product page with the format /product/[seriesCode]/?Page=[number], the seriesCode should be updated correctly with the new value. In this case, seriesCode should be 5678 when navigating to http://localhost:3000/product/5678/?Page=2.

To Reproduce

My reproduce on github link:
https://github.com/kutan138/test-middle

Copy code

1. Set up Next.js with the following configuration:
   next.config.js

const nextConfig = { trailingSlash: true, generateBuildId: () => "release/v1", };

2. Create a middleware

3. Access the URL http://localhost:3000/product/1234/?Page=2. You should see that seriesCode=1234.

4. Now click a link or navigate programmatically to http://localhost:3000/product/5678/?Page=2. The seriesCode should update to 5678, but it is undefined with console log

Screenshots

First render (no issue):

After clicking link (issue occurs):

Start by reproducing the navigation in the linked test-middle repository using next.config.js with trailingSlash and generateBuildId, then inspect the middleware involved in the dynamic /product/[seriesCode]/ route. Done means navigating from product/1234/?Page=2 to product/5678/?Page=2 preserves the updated seriesCode as described.