Next.js: How Can I Make Dynamic Routes With Spaces Work?

Viewed 331

I have a getStaticPaths function that generates two nearly identical paths: foo%20bar and foo_bar. My foo_bar path works great, but for some reason the foo%20bar path doesn't work: it routes to my 404 page (whether I literally browse to foo%20bar or just foo bar).

Is there some trick to make URIEncoded spaces (ie. %20) work in dynamic Next.js routes?

1 Answers

Sadly, that isn't possible yet as reported here.

You can use encodeURIComponent on the foo%20bar path in your getStaticPaths, but it'll only be accessible as foo%2520bar in the browser, and not foo%20bar as you would expect.

Related