I have been using App router because it was recommended at the time of project init. I want a custom route for example base_url/products/product-slug. It is pretty simple using page router, we can have a a file named [slug].js under page/products. But can this be implemented using App router?

I have created a file [slug].js under app/shop. I would like a custom route. So if I go to /shop/product-slug, it should render whatever is in /app/shop/products/index.js file

app/
|– shop/
| |– page.js
| |– layout.js
| |– products/
| | |– [slug].js
|– dashboard/
| | |– page.js

I have tried having page.js file in products directory but it does not work for dynamic data.