Update experimental skipTrailingSlashRedirect handling (#43201)

Fixes: [slack thread](https://vercel.slack.com/archives/C01224Q5M99/p1669029502713689?thread_ts=1668452468.314249&cid=C01224Q5M99) ## Bug - [x] Related issues linked using `fixes #number` - [x] Integration tests added - [ ] Errors have a helpful link attached, see `contributing.md`
vercel · Nov 21, 2022 · c1370c9 · c1370c9
1 parent 3e8c6f4
commit c1370c9
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 1 deletion.
diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
@@ -299,6 +299,9 @@ export function getDefineEnv({
     'process.env.__NEXT_NO_MIDDLEWARE_URL_NORMALIZE': JSON.stringify(
       config.experimental.skipMiddlewareUrlNormalize
     ),
+    'process.env.__NEXT_MANUAL_TRAILING_SLASH': JSON.stringify(
+      config.experimental?.skipTrailingSlashRedirect
+    ),
     'process.env.__NEXT_HAS_WEB_VITALS_ATTRIBUTION': JSON.stringify(
       config.experimental.webVitalsAttribution &&
         config.experimental.webVitalsAttribution.length > 0

diff --git a/packages/next/client/normalize-trailing-slash.ts b/packages/next/client/normalize-trailing-slash.ts
@@ -6,7 +6,7 @@ import { parsePath } from '../shared/lib/router/utils/parse-path'
  * in `next.config.js`.
  */
 export const normalizePathTrailingSlash = (path: string) => {
-  if (!path.startsWith('/')) {
+  if (!path.startsWith('/') || process.env.__NEXT_MANUAL_TRAILING_SLASH) {
     return path
   }
 

diff --git a/test/e2e/skip-trailing-slash-redirect/app/pages/index.js b/test/e2e/skip-trailing-slash-redirect/app/pages/index.js
@@ -8,6 +8,10 @@ export default function Page(props) {
         to another
       </Link>
       <br />
+      <Link href="/another/" id="to-another-with-slash">
+        to another
+      </Link>
+      <br />
       <Link href="/blog/first" id="to-blog-first">
         to /blog/first
       </Link>

diff --git a/test/e2e/skip-trailing-slash-redirect/index.test.ts b/test/e2e/skip-trailing-slash-redirect/index.test.ts
@@ -174,6 +174,54 @@ describe('skip-trailing-slash-redirect', () => {
     expect(await res.text()).toContain('another page')
   })
 
+  it('should not apply trailing slash to links on client', async () => {
+    const browser = await webdriver(next.url, '/')
+    await browser.eval('window.beforeNav = 1')
+
+    expect(
+      new URL(
+        await browser.elementByCss('#to-another').getAttribute('href'),
+        'http://n'
+      ).pathname
+    ).toBe('/another')
+
+    await browser.elementByCss('#to-another').click()
+    await browser.waitForElementByCss('#another')
+
+    expect(await browser.eval('window.location.pathname')).toBe('/another')
+
+    await browser.back().waitForElementByCss('#to-another')
+
+    expect(
+      new URL(
+        await browser
+          .elementByCss('#to-another-with-slash')
+          .getAttribute('href'),
+        'http://n'
+      ).pathname
+    ).toBe('/another/')
+
+    await browser.elementByCss('#to-another-with-slash').click()
+    await browser.waitForElementByCss('#another')
+
+    expect(await browser.eval('window.location.pathname')).toBe('/another/')
+
+    await browser.back().waitForElementByCss('#to-another')
+    expect(await browser.eval('window.beforeNav')).toBe(1)
+  })
+
+  it('should not apply trailing slash on load on client', async () => {
+    let browser = await webdriver(next.url, '/another')
+    await check(() => browser.eval('next.router.isReady ? "yes": "no"'), 'yes')
+
+    expect(await browser.eval('location.pathname')).toBe('/another')
+
+    browser = await webdriver(next.url, '/another/')
+    await check(() => browser.eval('next.router.isReady ? "yes": "no"'), 'yes')
+
+    expect(await browser.eval('location.pathname')).toBe('/another/')
+  })
+
   it('should respond to index correctly', async () => {
     const res = await fetchViaHTTP(next.url, '/', undefined, {
       redirect: 'manual',