Improve error messages

packages/next-swc/crates/core/src/react_server_components.rs

@@ -395,14 +395,9 @@ pub fn server_components<C: Comments>(
             JsWord::from("client-only"),
             JsWord::from("react-dom/client"),
             JsWord::from("react-dom/server"),
-            // TODO-APP: JsWord::from("next/router"),
-            // TODO-APP: Rule out client hooks.
-        ],
-        invalid_client_imports: vec![
-            JsWord::from("server-only"),
-            // TODO-APP: Rule out server hooks such as `useCookies`, `useHeaders`,
-            // `usePreviewData`.
+            JsWord::from("next/router"),
         ],
+        invalid_client_imports: vec![JsWord::from("server-only"), JsWord::from("next/headers")],
         invalid_server_react_dom_apis: vec![
             JsWord::from("findDOMNode"),
             JsWord::from("flushSync"),

packages/next/build/webpack/plugins/wellknown-errors-plugin/parseRSC.ts

@@ -25,14 +25,20 @@ export function formatRSCErrorMessage(
         '\n\nMaybe one of these should be marked as a client entry with "use client":\n'
     } else if (NEXT_RSC_ERR_SERVER_IMPORT.test(message)) {
       const matches = message.match(NEXT_RSC_ERR_SERVER_IMPORT)
-      if (matches && matches[1] === 'react-dom/server') {
-        // If importing "react-dom/server", we should show a different error.
-        formattedMessage = `\n\nYou're importing a component that imports react-dom/server. To fix it, render or return the content directly as a Server Component instead for perf and security.`
-      } else {
-        formattedMessage = message.replace(
-          NEXT_RSC_ERR_SERVER_IMPORT,
-          `\n\nYou're importing a component that imports $1. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.\n\n`
-        )
+      switch (matches && matches[1]) {
+        case 'react-dom/server':
+          // If importing "react-dom/server", we should show a different error.
+          formattedMessage = `\n\nYou're importing a component that imports react-dom/server. To fix it, render or return the content directly as a Server Component instead for perf and security.`
+          break
+        case 'next/router':
+          // If importing "next/router", we should tell them to use "next/navigation".
+          formattedMessage = `\n\nYou have a Server Component that imports next/router. Use next/navigation instead.`
+          break
+        default:
+          formattedMessage = message.replace(
+            NEXT_RSC_ERR_SERVER_IMPORT,
+            `\n\nYou're importing a component that imports $1. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.\n\n`
+          )
       }
       formattedVerboseMessage =
         '\n\nMaybe one of these should be marked as a client entry "use client":\n'

test/e2e/app-dir/index.test.ts

@@ -893,23 +893,6 @@ describe('app dir', () => {
       })
 
       describe('next/router', () => {
-        // `useRouter` should not be accessible in server components.
-        it('should always return null when accessed from /app', async () => {
-          const browser = await webdriver(next.url, '/old-router')
-
-          try {
-            await browser.waitForElementByCss('#old-router')
-
-            const notNull = await browser.elementsByCss('.was-not-null')
-            expect(notNull.length).toBe(0)
-
-            const wasNull = await browser.elementsByCss('.was-null')
-            expect(wasNull.length).toBe(6)
-          } finally {
-            await browser.close()
-          }
-        })
-
         it('should support router.back and router.forward', async () => {
           const browser = await webdriver(next.url, '/back-forward/1')
 
@@ -1134,42 +1117,6 @@ describe('app dir', () => {
 
     describe('client components', () => {
       describe('hooks', () => {
-        describe('cookies function', () => {
-          // TODO-APP: should enable when implemented
-          it.skip('should throw an error when imported', async () => {
-            const res = await fetchViaHTTP(
-              next.url,
-              '/hooks/use-cookies/client'
-            )
-            expect(res.status).toBe(500)
-            expect(await res.text()).toContain('Internal Server Error')
-          })
-        })
-
-        describe('previewData function', () => {
-          // TODO-APP: should enable when implemented
-          it.skip('should throw an error when imported', async () => {
-            const res = await fetchViaHTTP(
-              next.url,
-              '/hooks/use-preview-data/client'
-            )
-            expect(res.status).toBe(500)
-            expect(await res.text()).toContain('Internal Server Error')
-          })
-        })
-
-        describe('headers function', () => {
-          // TODO-APP: should enable when implemented
-          it.skip('should throw an error when imported', async () => {
-            const res = await fetchViaHTTP(
-              next.url,
-              '/hooks/use-headers/client'
-            )
-            expect(res.status).toBe(500)
-            expect(await res.text()).toContain('Internal Server Error')
-          })
-        })
-
         describe('usePathname', () => {
           it('should have the correct pathname', async () => {
             const html = await renderViaHTTP(next.url, '/hooks/use-pathname')