Fix revalidatePath with params and trailing slash when deployed (vercel#88623)

Author: unstubbable

packages/next/errors.json

@@ -978,5 +978,6 @@
   "977": "maxPostponedStateSize must be a valid number (bytes) or filesize format string (e.g., \"5mb\")",
   "978": "Next.js has blocked a javascript: URL as a security precaution.",
   "979": "invariant: expected %s bytes of postponed state but only received %s bytes",
-  "980": "Failed to load client middleware manifest"
+  "980": "Failed to load client middleware manifest",
+  "981": "resolvedPathname must be set in request metadata"
 }

packages/next/src/export/worker.ts

@@ -24,6 +24,7 @@ import { trace } from '../trace'
 import { setHttpClientAndAgentOptions } from '../server/setup-http-agent-env'
 import { addRequestMeta } from '../server/request-meta'
 import { normalizeAppPath } from '../shared/lib/router/utils/app-paths'
+import { removeTrailingSlash } from '../shared/lib/router/utils/remove-trailing-slash'
 
 import { createRequestResponseMocks } from '../server/lib/mock-request'
 import { isAppRouteRoute } from '../lib/is-app-route-route'
@@ -176,6 +177,9 @@ async function exportPageImpl(
     req.url += '/'
   }
 
+  // Set the resolved pathname without trailing slash as request metadata.
+  addRequestMeta(req, 'resolvedPathname', removeTrailingSlash(updatedPath))
+
   if (
     locale &&
     buildExport &&

packages/next/src/server/app-render/app-render.tsx

@@ -2021,18 +2021,16 @@ async function renderToHTMLOrFlightImpl(
 
   const isPossibleActionRequest = getIsPossibleServerAction(req)
 
-  // For implicit tags, we need to use the rewritten pathname (if a rewrite
-  // occurred) rather than the original request pathname. Implicit tags are used
-  // to check cache staleness on read (for 'use cache') and as soft tags for
-  // fetch cache. Using the destination path ensures that
-  // revalidatePath('/dest') invalidates cache entries for pages rewritten to
-  // that destination.
-  const implicitTagsPathname =
-    getRequestMeta(req, 'rewrittenPathname') || url.pathname
+  // For implicit tags, we use the resolved pathname which has dynamic params
+  // interpolated, is decoded, and has trailing slash removed.
+  const resolvedPathname = getRequestMeta(req, 'resolvedPathname')
+  if (!resolvedPathname) {
+    throw new InvariantError('resolvedPathname must be set in request metadata')
+  }
 
   const implicitTags = await getImplicitTags(
     workStore.page,
-    implicitTagsPathname,
+    resolvedPathname,
     fallbackRouteParams
   )
 

packages/next/src/server/request-meta.ts

@@ -86,6 +86,12 @@ export interface RequestMeta {
    */
   rewrittenPathname?: string
 
+  /**
+   * The resolved pathname for the request. Dynamic route params are
+   * interpolated, the pathname is decoded, and the trailing slash is removed.
+   */
+  resolvedPathname?: string
+
   /**
    * The cookies that were added by middleware and were added to the response.
    */

packages/next/src/server/route-modules/route-module.ts

@@ -935,6 +935,7 @@ export abstract class RouteModule<
     } catch (_) {}
 
     resolvedPathname = removeTrailingSlash(resolvedPathname)
+    addRequestMeta(req, 'resolvedPathname', resolvedPathname)
 
     let deploymentId
     if (nextConfig.experimental?.runtimeServerDeploymentId) {

packages/next/src/server/web/spec-extension/revalidate.ts

@@ -15,6 +15,7 @@ import {
   ActionDidRevalidateDynamicOnly,
   ActionDidRevalidateStaticAndDynamic as ActionDidRevalidate,
 } from '../../../shared/lib/action-revalidation-kind'
+import { removeTrailingSlash } from '../../../shared/lib/router/utils/remove-trailing-slash'
 
 type CacheLifeConfig = {
   expire?: number
@@ -96,7 +97,7 @@ export function revalidatePath(originalPath: string, type?: 'layout' | 'page') {
     return
   }
 
-  let normalizedPath = `${NEXT_CACHE_IMPLICIT_TAG_ID}${originalPath || '/'}`
+  let normalizedPath = `${NEXT_CACHE_IMPLICIT_TAG_ID}${removeTrailingSlash(originalPath)}`
 
   if (type) {
     normalizedPath += `${normalizedPath.endsWith('/') ? '' : '/'}${type}`

test/e2e/app-dir/trailingslash/app/[lang]/cache-components/page.js

@@ -0,0 +1,12 @@
+import SharedPage from '../shared-page'
+
+// This page is compatible with Cache Components. It does not define a
+// `revalidate` route segment config, and uses 'use cache' instead. The path is
+// rewritten to here from /:lang(en|es)/ via rewrites in next.config.js when
+// __NEXT_CACHE_COMPONENTS is set to true.
+
+export default async function Page({ params }) {
+  'use cache'
+
+  return <SharedPage params={params} />
+}

test/e2e/app-dir/trailingslash/app/[lang]/layout.js

@@ -0,0 +1,16 @@
+import Link from 'next/link'
+
+export function generateStaticParams() {
+  return [{ lang: 'en' }, { lang: 'es' }]
+}
+
+export default function LangLayout({ children }) {
+  return (
+    <>
+      <nav>
+        <Link href="/en">English</Link> | <Link href="/es">Spanish</Link>
+      </nav>
+      <main>{children}</main>
+    </>
+  )
+}

test/e2e/app-dir/trailingslash/app/[lang]/legacy/page.js

@@ -0,0 +1,9 @@
+import SharedPage from '../shared-page'
+
+// This page uses the legacy `revalidate` route segment config instead of 'use
+// cache'. The path is rewritten to here from /:lang(en|es)/ via rewrites in
+// next.config.js when __NEXT_CACHE_COMPONENTS is not set.
+
+export const revalidate = 900
+
+export default SharedPage

test/e2e/app-dir/trailingslash/app/[lang]/revalidate-button.js

@@ -0,0 +1,45 @@
+'use client'
+
+import { useState, useTransition } from 'react'
+
+export function RevalidateButton({ lang }) {
+  const [isPending, startTransition] = useTransition()
+  const [result, setResult] = useState(null)
+
+  function handleRevalidate(withSlash) {
+    startTransition(async () => {
+      try {
+        const data = await fetch(
+          `/api/revalidate/?lang=${lang}&withSlash=${withSlash}`
+        ).then((res) => res.json())
+        startTransition(() => {
+          setResult(`Revalidated at: ${data.timestamp}`)
+        })
+      } catch (e) {
+        startTransition(() => {
+          setResult(`Error: ${e}`)
+        })
+      }
+    })
+  }
+
+  return (
+    <div>
+      <button
+        onClick={handleRevalidate.bind(null, true)}
+        disabled={isPending}
+        id="revalidate-button-with-slash"
+      >
+        {isPending ? 'Revalidating...' : `Revalidate /${lang}/`}
+      </button>
+      <button
+        onClick={handleRevalidate.bind(null, false)}
+        disabled={isPending}
+        id="revalidate-button-no-slash"
+      >
+        {isPending ? 'Revalidating...' : `Revalidate /${lang} (no slash)`}
+      </button>
+      {result && <pre id="revalidate-result">{result}</pre>}
+    </div>
+  )
+}