next/link prefixing urls with / only on client side

Bug report

Describe the bug

With the latest next.js version (10.0.3), I noticed a new warning in my console, without changing anything at the code. When using next/link a slash / get’s prefixed to the url on client side but not on server. I had no errors on 10.0.1.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Clone any next.js example repo (for ex.: using-router-app)
2. Modify your index.js page to this:

import Link from "next/link";

export default function Home() {
  return (
    <div>
      <Link href={`test`}>
        <a>test</a>
      </Link>
    </div>
  );
}

1. Check the console

react-dom.development.js:88 Warning: Prop `href` did not match. Server: "test" Client: "/test"
    in a (at pages/index.js:7)
    in Link (at pages/index.js:6)
    in div (at pages/index.js:5)
    in Home (created by App)
    in App
    in ErrorBoundary (created by ReactDevOverlay)
    in ReactDevOverlay (created by Container)
    in Container (created by AppContainer)
    in AppContainer
    in Root

Expected behavior

Prefix the url on client and server side, or don’t prefix it at all.

Screenshots

System information

• OS: Windows 10
• Browser Chrome
• Version of Next.js: v10.0.3
• Version of Node.js: v14.15.1
• Deployment: yarn dev

[sarangkartikey50]

Fix proposal

Currently I have tried by making removing the trailing slash in the client side. Now at both Server and Client the href will be ‘about’ and ‘about’ respectively. Not sure whether correct or not. pull request

next-server/lib/router/router.ts

const resolvedHref =
      finalUrl.origin === base.origin
-        ? finalUrl.href.slice(finalUrl.origin.length)
+        ? finalUrl.href.slice(finalUrl.origin.length + 1)
        : finalUrl.href

[marnixhoh]

I am experiencing a similar issue after adding i18n / Internationalized Routing to my next.config.js file. Note, that without adding that, this error does not occur. The i18n section of my next.config.js file:

i18n: {
    locales: ['en-US', 'nl'],
    defaultLocale: 'en-US',

    domains: [{
        domain: 'localhost',
        defaultLocale: 'nl',
        locales: ['en-US']
    }]
},

Below is the error I receive. Note that I am developing on http://localhost, but for some reason next.js is forcing https on the server:

Warning: Prop `href` did not match. Server: "https://localhost/" Client: "/"

Next version: 10.0.8