Symbols in dynamic routes cause "Error: failed to decode param"

[EliteMasterEric]

Bug report

Describe the bug

Use of a symbol, for example, %, within a dynamic route will cause the route-matcher to throw the error Error: failed to decode param.

To Reproduce

The issue has been reproduced, in a minimal fashion, in the following CodeSandbox:

CodeSandbox Link

Steps to reproduce the error:

1. Create a Dynamic Route.

2. Attempt to access a dynamic route where the parameter contains a special symbol such as a %.

Notably, attempting to use a function such as encodeURI() to escape the special symbol does NOT resolve the issue. Using the browser debug tool, I found that getRouteMatcher() in route-matcher.ts receives a URI which is already decoded, and thus attempts to decode the URI again.

Expected behavior

It is reasonable for unescaped symbols to cause an error, but I would expect that accessing /testb/100%25awesome would access /testb/[query].js with the query value 100%awesome.

Screenshots

System information

• OS: Windows
• Browser: Firefox
• Version of Next.js: 9.4.5

Additional context

In the use case where I encountered this issue, I was creating a page which makes an API call to load search results. The results of a given search will change relatively infrequently. Building the page for each possible search result is obviously not feasible, and I did not want to constantly rebuild the same page, so making the page use a dynamic route (rather than a ?search= query parameter) and using getStaticProps to fetch the search query from the URL was the obvious choice.

However, if any query the user makes contains a special symbol, the user is not able to be routed to the relevant search results, as the request fails even if the URI is encoded using standard means.

Using a query parameter like ?search= would be the normal solution, but in this case the search results cannot be cached (the parameter is not part of the URL), causing processing time to be wasted on common searches.

[timneutkens]

Seems like a duplicate of #12145. PR open at #12154

[EliteMasterEric]

After more research, it appears the issue is definitely caused by #12145.

As mentioned in this comment, the decodeURIComponent function is called twice.

[Timer]

This seems like a different issue. This one does have a properly encoded request URL it seems, #12145 is about invalid URLs.

[EliteMasterEric]

Inspecting for myself, the error mentioned in my issue does have a different message, but occurs on the same line and has the same cause. This function should not be parsing the path twice.

I think this issue is caused by the getRouteMatcher being used in several places, and in one of them the value is passed in unparsed.

I think the solution here is to ensure the parameter of getRouteMatcher has NOT been parsed. If the parameter is parsed before being received by the getRouteMatcher, the user cannot escape the / symbol to include it as a route parameter.

[Timer]

This was fixed in #14442

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.