From f7a7c3fafaa52fadd27bcb0712a0a1ad2d5ac68d Mon Sep 17 00:00:00 2001
From: Tim Neutkens <tim@timneutkens.nl>
Date: Sat, 8 Oct 2022 19:42:55 +0200
Subject: [PATCH] Handle `as` on next/link with new router (#41285)

Kudos @dferber90 who found this issue. Added a test and handled it gracefully for now. Keep in mind the behavior can't be 1-1 so it takes the `as` as the `href` value given that masking of parameters in this way is no longer supported, that will be superseded by parallel routes / route interception.



## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
---
 packages/next/client/link.tsx                      |  5 ++++-
 .../app/dashboard/deployments/info/[id]/page.js    |  9 +++++++++
 test/e2e/app-dir/app/app/link-with-as/page.js      | 14 ++++++++++++++
 test/e2e/app-dir/index.test.ts                     | 10 ++++++++++
 4 files changed, 37 insertions(+), 1 deletion(-)
 create mode 100644 test/e2e/app-dir/app/app/dashboard/deployments/info/[id]/page.js
 create mode 100644 test/e2e/app-dir/app/app/link-with-as/page.js

diff --git a/packages/next/client/link.tsx b/packages/next/client/link.tsx
index 874aea5f74260..292337af64414 100644
--- a/packages/next/client/link.tsx
+++ b/packages/next/client/link.tsx
@@ -182,7 +182,10 @@ function linkClicked(
       // If `beforePopState` doesn't exist on the router it's the AppRouter.
       const method: keyof AppRouterInstance = replace ? 'replace' : 'push'
 
-      router[method](href, { forceOptimisticNavigation: !prefetchEnabled })
+      // Apply `as` if it's provided.
+      router[method](as || href, {
+        forceOptimisticNavigation: !prefetchEnabled,
+      })
     }
   }
 
diff --git a/test/e2e/app-dir/app/app/dashboard/deployments/info/[id]/page.js b/test/e2e/app-dir/app/app/dashboard/deployments/info/[id]/page.js
new file mode 100644
index 0000000000000..df11944f5ad10
--- /dev/null
+++ b/test/e2e/app-dir/app/app/dashboard/deployments/info/[id]/page.js
@@ -0,0 +1,9 @@
+export default function Page({ params }) {
+  return (
+    <>
+      <p id="message">
+        hello from app/dashboard/deployments/info/[id]. ID is: {params.id}
+      </p>
+    </>
+  )
+}
diff --git a/test/e2e/app-dir/app/app/link-with-as/page.js b/test/e2e/app-dir/app/app/link-with-as/page.js
new file mode 100644
index 0000000000000..12a33746cc9fe
--- /dev/null
+++ b/test/e2e/app-dir/app/app/link-with-as/page.js
@@ -0,0 +1,14 @@
+import Link from 'next/link'
+
+export default function Page() {
+  return (
+    <>
+      <Link
+        href="/dashboard/deployments/info/[id]"
+        as="/dashboard/deployments/info/123"
+      >
+        <a id="link-to-info-123">To info 123</a>
+      </Link>
+    </>
+  )
+}
diff --git a/test/e2e/app-dir/index.test.ts b/test/e2e/app-dir/index.test.ts
index 385cd606aa370..13be6d7bac861 100644
--- a/test/e2e/app-dir/index.test.ts
+++ b/test/e2e/app-dir/index.test.ts
@@ -1540,6 +1540,16 @@ describe('app dir', () => {
           expect($('#category-id').text()).toBe('electronicsabc')
         }
       })
+      it('should handle as on next/link', async () => {
+        const browser = await webdriver(next.url, '/link-with-as')
+        expect(
+          await browser
+            .elementByCss('#link-to-info-123')
+            .click()
+            .waitForElementByCss('#message')
+            .text()
+        ).toBe(`hello from app/dashboard/deployments/info/[id]. ID is: 123`)
+      })
     })
 
     describe('not-found', () => {