[Middleware] Locale in NextResponse.rewrite(...) path ignored for dynamic routes when basepath is set and skipMiddlewareUrlNormalize is true

[joslarson]

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/localized-slugs-y6fgq8

To Reproduce

Set the following in next.config.js to add basepath, enable path based localization, and to set skipMiddlewareUrlNormalize to true.

const nextConfig = {
  basePath: "/basepath",
  i18n: {
    defaultLocale: "en-US",
    locales: ["en-US", "es", "fr"],
  },
  skipMiddlewareUrlNormalize: true,
};

module.exports = nextConfig;

Next create middleware with a rewrite to a different locale (I've setup the middleware here to read a query param to override the locale):

const { NextResponse } = require("next/server");

const SKIP = /^\/(basepath\/)?(_next).*/;

export function middleware(request) {
  if (SKIP.test(request.nextUrl.pathname)) return NextResponse.next();

  const locale = request.nextUrl.searchParams.get("lang");
  if (!locale) return NextResponse.next();

  const url = request.nextUrl.clone();
  if (!url.pathname.startsWith(`/${locale.toLowerCase()}`)) {
    url.pathname = `/${locale.toLowerCase()}${url.pathname}`;
  }

  console.log("rewrite to:", url.href);

  return NextResponse.rewrite(url);
}

Next create a dynamic page such as pages/test/[slug].tsx, and print out the locale:

import Link from "next/link";
import { useRouter } from "next/router";

const Page = () => {
  const router = useRouter();
  return (
    <>
      {router.pathname}: {router.locale}
    </>
  );
};

export default Page;

Go to that page with the lang param set to a different locale: /basepath/test/dynamic?lang=fr, you'll see that the redirect url logs correctly as /basepath/fr/test/dynamic, but the page loads with the router reporting en-US as the local.

Try these same steps for a non dynamic route, and you'll see that it does work in that case.

Pinning to ~13.3.0 fixes the issue, but no newer version resolves the issue.

Current vs. Expected behavior

I expect dynamic routes to respect rewrites the same as non-dynamic routes, where currently in the above scenario, that is not the case.

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
  Available memory (MB): 8198
  Available CPU cores: 4
Binaries:
  Node: 20.11.1
  npm: 10.2.4
  Yarn: 1.22.19
  pnpm: 8.15.4
Relevant Packages:
  next: 14.2.3 // Latest available version is detected (14.2.3).
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Middleware, Pages Router

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), next start (local)

Additional context

No response