Using `getStaticPaths` in combination with `trailingSlash: true` leads to invalid json prefetching

Bug report

Using getStaticPaths in combination with trailingSlash: true leads to invalid json prefetching. For a link to a dynamic route, the json file that is prefetched includes an invalid slash in the path, causing a 404 to be returned. However, when clicking the link and landing on the dynamic page the correct json file is fetched.

To Reproduce

1. Configure

// next.config.js
module.exports = {
  trailingSlash: true,
};

1. Add dynamic route

// pages/[name].js
export default function Hello({ name }) {
  return <div>Hello {name}</div>
}

export function getStaticProps(context) {
  return {
    props: {
      name: context.params.name
    }
  };
}

export function getStaticPaths() {
  return {
    paths: [
      { params: { name: 'world' } }
    ],
    fallback: false
  };
}

1. Add link to dynamic route

// pages/index.js
import Link from 'next/link'
export default function Home() {
  return (
    <div>
      <Link as="/world" href="/[name]">
        <a>Hello world</a>
      </Link>
    </div>
  )
}

1. Export using next build && next export
2. Open root page
3. Observe a network request for https://example.com/_next/data/some-hash/world/.json returning a 404

Expected behavior

The correct https://example.com/_next/data/some-hash/world.json is (pre)fetched

System information

• OS: macOs
• Browser (if applies): chrome
• Version of Next.js: 9.5.5
• Version of Node.js: v12.18.0

[bernardodestefano]

I have exactly the same issue, any updates?

[emadicio]

Following on this. It is a really serious issue for our project, as not being able to fetch the pages .json breaks prefetching of links, causing the entire app to re-render when you click on a link and subsequent loss of data in React contexts.