Dynamic routing broken with AWS API Gateway

[aaronhuisinga]

Version

v2.13.2

Reproduction link

(Not possible without AWS setup using API Gateway)

Steps to reproduce

1. Setup Nuxt app running behind AWS API Gateway
2. Create dynamic route
3. Click link to dynamic route

What is expected ?

Router navigates to page defined in dynamic route

What is actually happening?

400 error when trying to fetch /_nuxt/pages/resource/[_]id.js

Additional comments?

AWS API Gateway does not allow square brackets "[" and "]" in URLs. Nuxt uses these square brackets in the file names for the compiled JS for dynamic routes. Any time that a request is made to load this file, API Gateway returns a 400 error. The recommended fix for this is encoding the URL before making the request, which is what Next.js did to fix this same issue (vercel/next.js#8013). Another possible fix could be adding a configuration option for changing the name of the generated files for dynamic routes, and giving users the ability to replace the square brackets with something else.

_{This bug report is available on Nuxt community (#c10860)}

[cmorbitzer]

Also experiencing this issue. Seems to be introduced by #7603

[pi0]

Hi! Should be fixed by #7639 (you can early test using nuxt-edge)

[aaronhuisinga]

Thanks @pi0! I can confirm this PR fixes the issue. Just tested using nuxt-edge and routing works as expected.