diff --git a/test/e2e/app-dir/app/app/back-forward/[id]/page.js b/test/e2e/app-dir/app/app/back-forward/[id]/page.js
new file mode 100644
index 0000000000000..12da862d8a19e
--- /dev/null
+++ b/test/e2e/app-dir/app/app/back-forward/[id]/page.js
@@ -0,0 +1,24 @@
+'use client'
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+
+export default function Page({ params }) {
+  const router = useRouter()
+  return (
+    <>
+      <h1 id={`message-${params.id}`}>Hello from {params.id}</h1>
+      <Link
+        href={params.id === '1' ? '/back-forward/2' : '/back-forward/1'}
+        id="to-other-page"
+      >
+        Go to {params.id === '1' ? '2' : '1'}
+      </Link>
+      <button onClick={() => router.back()} id="back-button">
+        Back
+      </button>
+      <button onClick={() => router.forward()} id="forward-button">
+        Forward
+      </button>
+    </>
+  )
+}
diff --git a/test/e2e/app-dir/index.test.ts b/test/e2e/app-dir/index.test.ts
index 7fac781429347..f9de21f69d17b 100644
--- a/test/e2e/app-dir/index.test.ts
+++ b/test/e2e/app-dir/index.test.ts
@@ -913,6 +913,42 @@ describe('app dir', () => {
             await browser.close()
           }
         })
+
+        it('should support router.back and router.forward', async () => {
+          const browser = await webdriver(next.url, '/back-forward/1')
+
+          const firstMessage = 'Hello from 1'
+          const secondMessage = 'Hello from 2'
+
+          expect(await browser.elementByCss('#message-1').text()).toBe(
+            firstMessage
+          )
+
+          try {
+            const message2 = await browser
+              .waitForElementByCss('#to-other-page')
+              .click()
+              .waitForElementByCss('#message-2')
+              .text()
+            expect(message2).toBe(secondMessage)
+
+            const message1 = await browser
+              .waitForElementByCss('#back-button')
+              .click()
+              .waitForElementByCss('#message-1')
+              .text()
+            expect(message1).toBe(firstMessage)
+
+            const message2Again = await browser
+              .waitForElementByCss('#forward-button')
+              .click()
+              .waitForElementByCss('#message-2')
+              .text()
+            expect(message2Again).toBe(secondMessage)
+          } finally {
+            await browser.close()
+          }
+        })
       })
 
       describe('hooks', () => {