Multiple Optional Catchall Routes with overlapping patterns fails to correctly fall-back in dev mode

Bug report

Describe the bug

While next is in dev mode, it fails to build appropriate catchall route when multiple catchalls exist with overlapping patterns. For example, a page at pages/[[...foo]].js/ will not be built if pages/[bar]/[[...bazz.js]] exists, until first navigating to the homepage / to force a build of [[...foo]]

To Reproduce

Created an example branch with this behavior https://github.com/brandondc741/next-catchall-route-bug

Repro steps are located in https://github.com/brandondc741/next-catchall-route-bug/blob/master/HOW_TO_REPLICATE_ISSUE.md

1. npx next dev
2. First visit /foo/root
3. Observe 404
4. visit /
5. Observe page renders, [[…slug]] builds
6. visit /foo/root
7. Observe page now renders

Expected behavior

In dev mode, when next.js is given the path /foo/root it should

1. Attempt to render pages/[firstSegment]/[[...nestedSlug]].js
2. Fall-back to attempting to render [[...slug]].js

System information

• OS: macOS
• Version of Next.js: 9.5.3
• Version of Node.js: 12.18.0

[maidi29]

I’m experiencing a similar issue. I have the following structure

pages/foo/[…slug].tsx pages/[[…slug]].tsx

In the catchAllRoute of [[…slug]].tsx in the root, there exists a page foo/xy that is not covered by the filter in getStaticPaths of the […slug].tsx inside foo. In the dev mode the application runs into an error calling foo/xy. With build and start it works fine on the first call but when revalidate fires, the error is still there.

We managed to identify the possible cause of this bug: When running in the dev mode getStaticPaths is “ignored” because there is no static generation --> the call arrives in [slug].tsx inside foo and jumps into getStaticProps and tries to render the page from there without looking it up in [[…slug]].tsx in the root. While building, getStaticPaths is taken into account and everything renders as it should. Then (in our case) revalidate fires and again we directly jump into getStaticProps of the […slug].tsx inside foo.

A fix of this bug should consider the overlapping catchAllRoutes based on their filter in getStaticPaths also in revalidate and dev mode.

[fakeharahman]

Hey, I am new to open source. Can I try to work on this issue?