Handle as on next/link with new router (vercel#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

@@ -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,
+      })
     }
   }
 

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>
+    </>
+  )
+}

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>
+    </>
+  )
+}

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', () => {