Ok, so I conclude 'This is not possible yet'.

So I wanted to move a simple SPA from React -> next.js since the React docs recommend this framework, and next.js recommends app router. However, `next.js's app router can't even do this yet (more here): https://github.com/vercel/next.js/discussions/55393

I read discussions on the official next.js repository, and people are still asking for this feature, but it's not available yet. They are saying in pages router we can do it, but next.js recommends app router.

As a workaround, people are using /blogs/?slug=[<value>] instead of /blogs/[slug]

For my use case, I just wanted to use file-based routing that next.js provides instead of react-router, since React docs suggest this framework, and just get SPA output to deploy on CDN, but it doesn't seem to be possible after the research I did, Given that I am still open to new answers or work around if you find, Thanks.

References:

• https://github.com/vercel/next.js/discussions/55393
• https://github.com/vercel/next.js/discussions/64660