Client-side links to basePath result in doubled url segments

[mrkimbo]

Bug report

Describe the bug

Using a basePath configuration and navigating client-side using the Link component, a url that matches the basePath is not recognised as the site root and the basePath is added to the url.
This results in an incorrect url.

To Reproduce

Next Config:

{ 
  ...
  basePath: '/docs'
  ...
}

pages/test.js:

import React from 'react';
import Link from 'next/link';

const Test = () => (
  <main>
    <h1>Test</h1>
    <Link href="/docs">
      <a>Link to Home</a>
    </Link>
  </main>
)

export default Test;

Clicking the above link takes you to /docs/docs

Expected behavior

The Link component should recognise the href as being the basePath and therefore the site root and not add the basePath to the href.

System information

• OS: macOS
• Browser: chrome
• Version of Next.js: 9.5.3
• Version of Node.js: 12.4.1

[Janpot]

What should happen if you also have a page ./pages/docs.js? Should it link to that page? Or still to the root? Should the Link behave differently depending on whether you have a page like that or not?

[mrkimbo]

@Janpot fair point. Maybe I’m asking the Link component to be smarter than it needs to be.

My urls come from a CMS and are a data source for three micro front end apps. The /docs link will work in two apps, but will need to be rewritten to / in the third (the one using the /docs basePath.

Changing the URL so that it links to one place in order to reach another feels like a hack and it seems like there should be a mechanism to support this scenario.