Ensure navigating with middleware parses route params correctly

packages/next/server/base-server.ts

@@ -1239,10 +1239,7 @@ export default abstract class Server<ServerOptions extends Options = Options> {
  `${query.__nextLocale ? `/${query.__nextLocale}` : ''}${pathname}`
  )
  // return empty JSON when not an SSG/SSP page and not an error
- if (
- !(isSSG || hasServerProps) &&
- (!res.statusCode || res.statusCode === 200 || res.statusCode === 404)
- ) {
+ if (!(isSSG || hasServerProps)) {
  res.setHeader('content-type', 'application/json')
  res.body('{}')
  res.send()

packages/next/server/next-server.ts

@@ -1332,6 +1332,15 @@ export default class NextNodeServer extends BaseServer {
  for (const [key, value] of Object.entries(
  toNodeHeaders(result.response.headers)
  )) {
+ if (
+ [
+ 'x-middleware-rewrite',
+ 'x-middleware-redirect',
+ 'x-middleware-refresh',
+ ].includes(key)
+ ) {
+ continue
+ }
  if (key !== 'content-encoding' && value !== undefined) {
  res.setHeader(key, value)
  }

packages/next/server/web/adapter.ts

@@ -86,7 +86,7 @@ export async function adapter(params: {
  */
  if (isDataReq) {
  response.headers.set(
- 'x-nextjs-matched-path',
+ 'x-nextjs-rewrite',
  relativizeURL(String(rewriteUrl), String(requestUrl))
  )
  }

packages/next/shared/lib/router/router.ts

@@ -355,6 +355,7 @@ export type CompletePrivateRouteInfo = {
  err?: Error
  error?: any
  route?: string
+ resolvedAs?: string
 }
 
 export type AppProps = Pick<CompletePrivateRouteInfo, 'Component' | 'err'> & {
@@ -1234,8 +1235,32 @@ export default class Router implements BaseRouter {
  isPreview: nextState.isPreview,
  })
 
- if ('route' in routeInfo) {
+ if ('route' in routeInfo && routeInfo.route !== route) {
  pathname = routeInfo.route || route
+
+ if (isDynamicRoute(pathname)) {
+ const prefixedAs =
+ routeInfo.resolvedAs ||
+ addBasePath(addLocale(as, nextState.locale), true)
+
+ let rewriteAs = prefixedAs
+
+ if (hasBasePath(rewriteAs)) {
+ rewriteAs = removeBasePath(rewriteAs)
+ }
+
+ if (process.env.__NEXT_I18N_SUPPORT) {
+ const localeResult = normalizeLocalePath(rewriteAs, this.locales)
+ nextState.locale = localeResult.detectedLocale || nextState.locale
+ rewriteAs = localeResult.pathname
+ }
+ const routeRegex = getRouteRegex(pathname)
+ const routeMatch = getRouteMatcher(routeRegex)(rewriteAs)
+
+ if (routeMatch) {
+ Object.assign(query, routeMatch)
+ }
+ }
  }
 
  // If the routeInfo brings a redirect we simply apply it.
@@ -1703,6 +1728,7 @@ export default class Router implements BaseRouter {
 
  routeInfo.props = props
  routeInfo.route = route
+ routeInfo.resolvedAs = resolvedAs
  this.components[route] = routeInfo
  return routeInfo
  } catch (err) {
@@ -2127,9 +2153,9 @@ function getMiddlewareData<T extends FetchDataOutput>(
  trailingSlash: Boolean(process.env.__NEXT_TRAILING_SLASH),
  }
 
- // TODO: ensure x-nextjs-matched-path is always present instead of both
- // variants
- let rewriteTarget = response.headers.get('x-nextjs-matched-path')
+ let rewriteTarget =
+  response.headers.get('x-nextjs-rewrite') ||
+   response.headers.get('x-nextjs-matched-path')
 
  const matchedPath = response.headers.get('x-matched-path')
 
@@ -2145,17 +2171,54 @@ function getMiddlewareData<T extends FetchDataOutput>(
  parseData: true,
  })
 
- parsedRewriteTarget.pathname = pathnameInfo.pathname
  const fsPathname = removeTrailingSlash(pathnameInfo.pathname)
- return Promise.resolve(options.router.pageLoader.getPageList()).then(
- (pages) => ({
+ return Promise.all([
+ options.router.pageLoader.getPageList(),
+ getClientBuildManifest(),
+ ]).then(([pages, { __rewrites: rewrites }]: any) => {
+ let as = parsedRewriteTarget.pathname
+
+ if (isDynamicRoute(as)) {
+ const parsedSource = getNextPathnameInfo(
+ parseRelativeUrl(source).pathname,
+ { parseData: true }
+ )
+
+ as = addBasePath(parsedSource.pathname)
+ }
+
+ if (process.env.__NEXT_HAS_REWRITES) {
+ const result = resolveRewrites(
+ as,
+ pages,
+ rewrites,
+ parsedRewriteTarget.query,
+ (path: string) => resolveDynamicRoute(path, pages),
+ options.router.locales
+ )
+
+ if (result.matchedPage) {
+ parsedRewriteTarget.pathname = result.parsedAs.pathname
+ parsedRewriteTarget.query = result.parsedAs.query
+ }
+ }
+
+ const resolvedHref = !pages.includes(fsPathname)
+ ? resolveDynamicRoute(
+ normalizeLocalePath(
+ removeBasePath(parsedRewriteTarget.pathname),
+ options.router.locales
+ ).pathname,
+ pages
+ )
+ : fsPathname
+
+ return {
  type: 'rewrite' as const,
  parsedAs: parsedRewriteTarget,
- resolvedHref: !pages.includes(fsPathname)
- ? resolveDynamicRoute(fsPathname, pages)
- : fsPathname,
- })
- )
+ resolvedHref,
+ }
+ })
  }
 
  const src = parsePath(source)

test/e2e/middleware-general/app/middleware.js

@@ -52,6 +52,16 @@ export async function middleware(request) {
  }
  }
 
+ if (url.pathname === '/rewrite-to-dynamic') {
+ url.pathname = '/blog/from-middleware'
+ return NextResponse.rewrite(url)
+ }
+
+ if (url.pathname === '/rewrite-to-config-rewrite') {
+ url.pathname = '/rewrite-3'
+ return NextResponse.rewrite(url)
+ }
+
  if (url.pathname.startsWith('/fetch-user-agent-crypto')) {
  try {
  const apiRoute = new URL(url)

test/e2e/middleware-general/app/next.config.js

@@ -22,6 +22,10 @@ module.exports = {
  source: '/rewrite-2',
  destination: '/about/a',
  },
+ {
+ source: '/rewrite-3',
+ destination: '/blog/middleware-rewrite',
+ },
  ]
  },
 }

test/e2e/middleware-general/app/pages/blog/[slug].js

@@ -0,0 +1,23 @@
+import { useRouter } from 'next/router'
+
+export default function Page(props) {
+ const router = useRouter()
+ return (
+ <>
+ <p id="blog">/blog/[slug]</p>
+ <p id="query">{JSON.stringify(router.query)}</p>
+ <p id="pathname">{router.pathname}</p>
+ <p id="as-path">{router.asPath}</p>
+ <p id="props">{JSON.stringify(props)}</p>
+ </>
+ )
+}
+
+export function getServerSideProps({ params }) {
+ return {
+ props: {
+ now: Date.now(),
+ params,
+ },
+ }
+}

test/e2e/middleware-general/test/index.test.ts

@@ -118,6 +118,96 @@ describe('Middleware Runtime', () => {
  })
  }
 
+ it('should have correct dynamic route params on client-transition to dynamic route', async () => {
+ const browser = await webdriver(next.url, '/')
+ await browser.eval('window.beforeNav = 1')
+ await browser.eval('window.next.router.push("/blog/first")')
+ await browser.waitForElementByCss('#blog')
+
+ expect(JSON.parse(await browser.elementByCss('#query').text())).toEqual({
+ slug: 'first',
+ })
+ expect(
+ JSON.parse(await browser.elementByCss('#props').text()).params
+ ).toEqual({
+ slug: 'first',
+ })
+ expect(await browser.elementByCss('#pathname').text()).toBe('/blog/[slug]')
+ expect(await browser.elementByCss('#as-path').text()).toBe('/blog/first')
+
+ await browser.eval('window.next.router.push("/blog/second")')
+ await check(() => browser.elementByCss('body').text(), /"slug":"second"/)
+
+ expect(JSON.parse(await browser.elementByCss('#query').text())).toEqual({
+ slug: 'second',
+ })
+ expect(
+ JSON.parse(await browser.elementByCss('#props').text()).params
+ ).toEqual({
+ slug: 'second',
+ })
+ expect(await browser.elementByCss('#pathname').text()).toBe('/blog/[slug]')
+ expect(await browser.elementByCss('#as-path').text()).toBe('/blog/second')
+ })
+
+ it('should have correct dynamic route params for middleware rewrite to dynamic route', async () => {
+ const browser = await webdriver(next.url, '/')
+ await browser.eval('window.beforeNav = 1')
+ await browser.eval('window.next.router.push("/rewrite-to-dynamic")')
+ await browser.waitForElementByCss('#blog')
+
+ expect(JSON.parse(await browser.elementByCss('#query').text())).toEqual({
+ slug: 'from-middleware',
+ })
+ expect(
+ JSON.parse(await browser.elementByCss('#props').text()).params
+ ).toEqual({
+ slug: 'from-middleware',
+ })
+ expect(await browser.elementByCss('#pathname').text()).toBe('/blog/[slug]')
+ expect(await browser.elementByCss('#as-path').text()).toBe(
+ '/rewrite-to-dynamic'
+ )
+ })
+
+ it('should have correct route params for chained rewrite from middleware to config rewrite', async () => {
+ const browser = await webdriver(next.url, '/')
+ await browser.eval('window.beforeNav = 1')
+ await browser.eval('window.next.router.push("/rewrite-to-config-rewrite")')
+ await browser.waitForElementByCss('#blog')
+
+ expect(JSON.parse(await browser.elementByCss('#query').text())).toEqual({
+ slug: 'middleware-rewrite',
+ })
+ expect(
+ JSON.parse(await browser.elementByCss('#props').text()).params
+ ).toEqual({
+ slug: 'middleware-rewrite',
+ })
+ expect(await browser.elementByCss('#pathname').text()).toBe('/blog/[slug]')
+ expect(await browser.elementByCss('#as-path').text()).toBe(
+ '/rewrite-to-config-rewrite'
+ )
+ })
+
+ it('should have correct route params for rewrite from config dynamic route', async () => {
+ const browser = await webdriver(next.url, '/')
+ await browser.eval('window.beforeNav = 1')
+ await browser.eval('window.next.router.push("/rewrite-3")')
+ await browser.waitForElementByCss('#blog')
+
+ expect(JSON.parse(await browser.elementByCss('#query').text())).toEqual({
+ slug: 'middleware-rewrite',
+ })
+ expect(
+ JSON.parse(await browser.elementByCss('#props').text()).params
+ ).toEqual({
+ slug: 'middleware-rewrite',
+ })
+ expect(await browser.elementByCss('#pathname').text()).toBe('/blog/[slug]')
+ expect(await browser.elementByCss('#as-path').text()).toBe('/rewrite-3')
+ })
+
  it('should redirect the same for direct visit and client-transition', async () => {
  const res = await fetchViaHTTP(
  next.url,