Trigger error overlay for dynamic route mismatch (#9031)

packages/next/next-server/lib/router/router.ts

@@ -318,9 +318,14 @@ export default class Router implements BaseRouter {
         const rr = getRouteRegex(route)
         const routeMatch = getRouteMatcher(rr)(asPathname)
         if (!routeMatch) {
-          console.error(
+          const error =
             'The provided `as` value is incompatible with the `href` value. This is invalid. https://err.sh/zeit/next.js/incompatible-href-as'
-          )
+
+          if (process.env.NODE_ENV !== 'production') {
+            throw new Error(error)
+          } else {
+            console.error(error)
+          }
           return resolve(false)
         }
 

test/integration/invalid-href/pages/dynamic-route-mismatch.js

+import Link from 'next/link'
+
+export default () => (
+  <Link href='/[post]' as='/blog/post-1'>
+    <a>Click me</a>
+  </Link>
+)

test/integration/invalid-href/test/index.test.js

@@ -82,6 +82,14 @@ describe('Invalid hrefs', () => {
     it('shows error when https://google.com is used as href on router.replace', async () => {
       await showsError('/second?method=replace', secondErrorRegex, true)
     })
+
+    it('shows error when dynamic route mismatch is used on Link', async () => {
+      await showsError(
+        '/dynamic-route-mismatch',
+        /The provided `as` value is incompatible with the `href` value/,
+        true
+      )
+    })
   })
 
   describe('production mode', () => {
@@ -92,27 +100,27 @@ describe('Invalid hrefs', () => {
     })
     afterAll(() => killApp())
 
-    it('shows error when mailto: is used as href on Link', async () => {
+    it('does not show error in production when mailto: is used as href on Link', async () => {
       await noError('/first')
     })
 
-    it('shows error when mailto: is used as href on router.push', async () => {
+    it('does not show error in production when mailto: is used as href on router.push', async () => {
       await noError('/first?method=push', true)
     })
 
-    it('shows error when mailto: is used as href on router.replace', async () => {
+    it('does not show error in production when mailto: is used as href on router.replace', async () => {
       await noError('/first?method=replace', true)
     })
 
-    it('shows error when https://google.com is used as href on Link', async () => {
+    it('does not show error in production when https://google.com is used as href on Link', async () => {
       await noError('/second')
     })
 
-    it('shows error when http://google.com is used as href on router.push', async () => {
+    it('does not show error in production when http://google.com is used as href on router.push', async () => {
       await noError('/second?method=push', true)
     })
 
-    it('shows error when https://google.com is used as href on router.replace', async () => {
+    it('does not show error in production when https://google.com is used as href on router.replace', async () => {
       await noError('/second?method=replace', true)
     })
   })