Handle as on next/link with new router

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