fix hydration mismatch on href for url with anchor refs (#21065)

Co-authored-by: Tim Neutkens <tim@timneutkens.nl>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: 3 people

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

@@ -163,7 +163,8 @@ export function delBasePath(path: string): string {
  * Detects whether a given url is routable by the Next.js router (browser only).
  */
 export function isLocalURL(url: string): boolean {
-  if (url.startsWith('/')) return true
+  // prevent a hydration mismatch on href for url with anchor refs
+  if (url.startsWith('/') || url.startsWith('#')) return true
   try {
     // absolute urls can be local if they are on the same origin
     const locationOrigin = getLocationOrigin()

test/integration/link-with-hash/pages/index.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import Link from 'next/link'
+
+const Home = () => {
+  return (
+    <>
+      <Link href="#hash-link">
+        <a>Hash Link</a>
+      </Link>
+    </>
+  )
+}
+
+export default Home

test/integration/link-with-hash/test/index.test.js

@@ -0,0 +1,53 @@
+/* eslint-env jest */
+
+import { join } from 'path'
+import webdriver from 'next-webdriver'
+import {
+  findPort,
+  launchApp,
+  killApp,
+  nextStart,
+  nextBuild,
+} from 'next-test-utils'
+
+jest.setTimeout(1000 * 60 * 5)
+let app
+let appPort
+const appDir = join(__dirname, '..')
+
+const runTests = () => {
+  it('should not have hydration mis-match for hash link', async () => {
+    const browser = await webdriver(appPort, '/')
+    const browserLogs = await browser.log('browser')
+    let found = false
+    browserLogs.forEach((log) => {
+      if (log.message.includes('Warning: Prop')) {
+        found = true
+      }
+    })
+    expect(found).toEqual(false)
+  })
+}
+
+describe('Link with hash href', () => {
+  describe('development', () => {
+    beforeAll(async () => {
+      appPort = await findPort()
+      app = await launchApp(appDir, appPort)
+    })
+    afterAll(() => killApp(app))
+
+    runTests()
+  })
+
+  describe('production', () => {
+    beforeAll(async () => {
+      await nextBuild(appDir)
+      appPort = await findPort()
+      app = await nextStart(appDir, appPort)
+    })
+    afterAll(() => killApp(app))
+
+    runTests()
+  })
+})