Dynamic route in NextJS cause security problem

Question

I am using dynamic route in my next.js website. My website is protected by WAF (Web Application Firewall), it block all URL that contain special characters (such as (, ), [, ]). So that, URLs like https://mywebsite.xyz/_next/static/chunks/app/(home)/info-hub/%5Bposts%5D/page-55e4c6dc50d1aae0.js cannot be loaded. The security team refuses to ignore these special characters. So how can I change my next.js app to use dynamic route but not using these special characters?

Answer 1

If you are using next.js' app router then you don't have to worry about these "()[]". So, if your folder structure is like these:

App

• (dashboard)
• • [userId]
• • • page.tsx

then your url will be localhost:3000/123 where "123" can be any dynamic userId.

"()" are used for folder structure and are ignored by next.js, and "[ ]" are used for dynamic routes, so you won't be writing them in the URL.