diff --git a/packages/next/client/router.ts b/packages/next/client/router.ts
index 7f4acbd51a60c..930535fb1de3b 100644
--- a/packages/next/client/router.ts
+++ b/packages/next/client/router.ts
@@ -133,7 +133,7 @@ export function useRouter(): NextRouter {
   const router = React.useContext(RouterContext)
   if (!router) {
     throw new Error(
-      'Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted'
+      'NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted'
     )
   }
 
diff --git a/test/e2e/app-dir/app/app/compat-hooks/app/page.js b/test/e2e/app-dir/app/app/compat-hooks/app/page.js
new file mode 100644
index 0000000000000..a72c90c528f94
--- /dev/null
+++ b/test/e2e/app-dir/app/app/compat-hooks/app/page.js
@@ -0,0 +1,6 @@
+'use client'
+import { RouterHooksFixtures } from '../../../components/router-hooks-fixtures'
+
+export default function Page() {
+  return <RouterHooksFixtures />
+}
diff --git a/test/e2e/app-dir/app/app/router/page.js b/test/e2e/app-dir/app/app/router/page.js
new file mode 100644
index 0000000000000..e8a3dbcd7ecc9
--- /dev/null
+++ b/test/e2e/app-dir/app/app/router/page.js
@@ -0,0 +1,10 @@
+'use client'
+
+import { useRouter } from 'next/router'
+
+export default function RouterPage() {
+  // eslint-disable-next-line no-unused-vars
+  const router = useRouter()
+
+  return <div id="contents">You shouldn't see this</div>
+}
diff --git a/test/e2e/app-dir/app/components/router-hooks-fixtures.js b/test/e2e/app-dir/app/components/router-hooks-fixtures.js
index 6c5772188b663..90c224f5d11a4 100644
--- a/test/e2e/app-dir/app/components/router-hooks-fixtures.js
+++ b/test/e2e/app-dir/app/components/router-hooks-fixtures.js
@@ -1,10 +1,10 @@
-import { useRouter as usePagesRouter } from 'next/router'
+import { useRouter as usePagesRouter } from 'next/compat/router'
 import {
   usePathname,
   useRouter as useAppRouter,
   useSearchParams,
 } from 'next/compat/navigation'
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useMemo } from 'react'
 
 export const RouterHooksFixtures = () => {
   const pagesRouter = usePagesRouter()
@@ -12,21 +12,26 @@ export const RouterHooksFixtures = () => {
   const searchParams = useSearchParams()
   const pathname = usePathname()
 
+  const isReady = useMemo(
+    () => !pagesRouter || pagesRouter.isReady,
+    [pagesRouter]
+  )
+
   const [value, setValue] = useState(null)
   useEffect(() => {
-    if (!pagesRouter.isReady) {
+    if (!isReady) {
       return
     }
 
-    setValue(searchParams.get('key'))
-  }, [pagesRouter.isReady, searchParams])
+    setValue(searchParams?.get('key') ?? null)
+  }, [isReady, searchParams])
 
   const onClick = () => {
-    appRouter.push('/adapter-hooks/pushed')
+    appRouter.push('/compat-hooks/pushed')
   }
 
   return (
-    <div id={pagesRouter.isReady ? 'router-ready' : 'router-not-ready'}>
+    <div id={isReady ? 'router-ready' : 'router-not-ready'}>
       <div id="key-value">{value}</div>
       <div id="pathname">{pathname}</div>
       <button type="button" onClick={onClick}>
diff --git a/test/e2e/app-dir/app/pages/adapter-hooks/[id].js b/test/e2e/app-dir/app/pages/compat-hooks/[id].js
similarity index 100%
rename from test/e2e/app-dir/app/pages/adapter-hooks/[id].js
rename to test/e2e/app-dir/app/pages/compat-hooks/[id].js
diff --git a/test/e2e/app-dir/app/pages/adapter-hooks/[id]/account.js b/test/e2e/app-dir/app/pages/compat-hooks/[id]/account.js
similarity index 100%
rename from test/e2e/app-dir/app/pages/adapter-hooks/[id]/account.js
rename to test/e2e/app-dir/app/pages/compat-hooks/[id]/account.js
diff --git a/test/e2e/app-dir/app/pages/adapter-hooks/pushed.js b/test/e2e/app-dir/app/pages/compat-hooks/pushed.js
similarity index 100%
rename from test/e2e/app-dir/app/pages/adapter-hooks/pushed.js
rename to test/e2e/app-dir/app/pages/compat-hooks/pushed.js
diff --git a/test/e2e/app-dir/app/pages/adapter-hooks/static.js b/test/e2e/app-dir/app/pages/compat-hooks/static.js
similarity index 100%
rename from test/e2e/app-dir/app/pages/adapter-hooks/static.js
rename to test/e2e/app-dir/app/pages/compat-hooks/static.js
diff --git a/test/e2e/app-dir/index.test.ts b/test/e2e/app-dir/index.test.ts
index f5424ec18bd08..d55f4659394db 100644
--- a/test/e2e/app-dir/index.test.ts
+++ b/test/e2e/app-dir/index.test.ts
@@ -4,6 +4,7 @@ import { NextInstance } from 'test/lib/next-modes/base'
 import {
   check,
   fetchViaHTTP,
+  getRedboxDescription,
   getRedboxHeader,
   hasRedbox,
   renderViaHTTP,
@@ -979,6 +980,22 @@ describe('app dir', () => {
             await browser.close()
           }
         })
+
+        if (isDev) {
+          it('should throw an error when used in app/', async () => {
+            const browser = await webdriver(next.url, '/router')
+
+            try {
+              expect(await hasRedbox(browser, true)).toBeTrue()
+
+              expect(await getRedboxDescription(browser)).toContain(
+                'NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted'
+              )
+            } finally {
+              await browser.close()
+            }
+          })
+        }
       })
 
       describe('hooks', () => {
@@ -1040,7 +1057,7 @@ describe('app dir', () => {
           })
         })
 
-        describe('headers function', () => {
+        describe('headers', () => {
           it('should have access to incoming headers in a server component', async () => {
             // Check to see that we can't see the header when it's not present.
             let html = await renderViaHTTP(
@@ -1077,7 +1094,7 @@ describe('app dir', () => {
           })
         })
 
-        describe('previewData function', () => {
+        describe('previewData', () => {
           it('should return no preview data when there is none', async () => {
             const browser = await webdriver(next.url, '/hooks/use-preview-data')
 
@@ -1171,44 +1188,41 @@ describe('app dir', () => {
       })
     })
 
-    describe('client components', () => {
-      describe('hooks', () => {
-        describe('from pages', () => {
-          it.each([
-            { pathname: '/adapter-hooks/static' },
-            { pathname: '/adapter-hooks/1' },
-            { pathname: '/adapter-hooks/2' },
-            { pathname: '/adapter-hooks/1/account' },
-            { pathname: '/adapter-hooks/static', keyValue: 'value' },
-            { pathname: '/adapter-hooks/1', keyValue: 'value' },
-            { pathname: '/adapter-hooks/2', keyValue: 'value' },
-            { pathname: '/adapter-hooks/1/account', keyValue: 'value' },
-          ])(
-            'should have the correct hooks',
-            async ({ pathname, keyValue = '' }) => {
-              const browser = await webdriver(
-                next.url,
-                pathname + (keyValue ? `?key=${keyValue}` : '')
-              )
+    describe('next/compat/navigation', () => {
+      it.each([
+        { pathname: '/compat-hooks/app' },
+        { pathname: '/compat-hooks/static' },
+        { pathname: '/compat-hooks/1' },
+        { pathname: '/compat-hooks/2' },
+        { pathname: '/compat-hooks/1/account' },
+        { pathname: '/compat-hooks/static', keyValue: 'value' },
+        { pathname: '/compat-hooks/1', keyValue: 'value' },
+        { pathname: '/compat-hooks/2', keyValue: 'value' },
+        { pathname: '/compat-hooks/1/account', keyValue: 'value' },
+      ])(
+        'should have the correct hooks',
+        async ({ pathname, keyValue = '' }) => {
+          const browser = await webdriver(
+            next.url,
+            pathname + (keyValue ? `?key=${keyValue}` : '')
+          )
 
-              try {
-                await browser.waitForElementByCss('#router-ready')
-                expect(await browser.elementById('key-value').text()).toBe(
-                  keyValue
-                )
-                expect(await browser.elementById('pathname').text()).toBe(
-                  pathname
-                )
+          try {
+            await browser.waitForElementByCss('#router-ready')
+            expect(await browser.elementById('key-value').text()).toBe(keyValue)
+            expect(await browser.elementById('pathname').text()).toBe(pathname)
 
-                await browser.elementByCss('button').click()
-                await browser.waitForElementByCss('#pushed')
-              } finally {
-                await browser.close()
-              }
-            }
-          )
-        })
+            await browser.elementByCss('button').click()
+            await browser.waitForElementByCss('#pushed')
+          } finally {
+            await browser.close()
+          }
+        }
+      )
+    })
 
+    describe('client components', () => {
+      describe('next/navigation', () => {
         describe('usePathname', () => {
           it('should have the correct pathname', async () => {
             const html = await renderViaHTTP(next.url, '/hooks/use-pathname')
@@ -1259,7 +1273,7 @@ describe('app dir', () => {
           }
         })
 
-        describe('useRouter', () => {
+        describe('next/router', () => {
           it('should allow access to the router', async () => {
             const browser = await webdriver(next.url, '/hooks/use-router')