Bug report

Describe the bug

I have a setup with an optional catch-all route on the most top level (directly in pages directory), which is named [[...slug]].js, so that I can have pretty URLs (it's a Strapi-backed-up website, by the way). Then, I also have a custom 404 page, which is the pages/404.js file. If I'm using a <Link> component from next/link, which has a href attribute, pointing to a page that doesn't exist (its path is not one of [[...slug]]'s paths that are fetched in getStaticPaths(), then on client-side it tries to render the page [[...slug]] instead of my custom 404 page. However, when I visit the non-existing page directly or by refreshing the page, I see the custom 404 page. I noticed that this happens whenever I have export async function getStaticProps(){} in my custom 404 page. If I remove it - everything is alright. In case anyone asks - I need the static props in my custom 404 page, because I am fetching some data like the title and the image for this page (they are customizable through Strapi).

To Reproduce

1. Create a new Next.js project
2. Create pages/[[...slug]].js to act as a catch-all route of all possible routes
3. Create a custom 404 page pages/404.js with getStaticProps
4. Render a Link component that is pointing to a non-existing path/slug.
5. Generate a production build by running next build
6. Start the server with next start and navigate to this non-existing path by clicking on the rendered Link.

Expected behavior

I expect to see the custom 404 page by clicking on the Link. Instead - I see "An unexpected error has occurred." and in the console I see errors that indicate it tried to render the [[...slug]].js instead.

System information

• Version of Next.js: 9.5.5
• Version of Node.js: 12.*

Additional context

Happens only when using the production build. I guess it is this way, because in development there is an automatic page refresh when I try to load a non-existing page.