I have want to have a URL structure that looks like this:
Where I have a URL param that filters the content shown on the website without "routing" the user somewhere else. The params are only there as a sort of global filter of content, the website layout doesnt change, only the content. So no "filter" just means show everything, hiking means show only products with the "hiking" tag etc.
The reason I want to do it like this across the entire site is so that I can send a specific URL to a customer with filters already in place.
Solutions:
This can be done with query params, but the links will look very ugly and I want this to be global on the site, so not only the products page, but also the blog/news etc. Having to send query params on every link is not an options for us.
This can also be done by using the Next.js dynamic slugs, however I dont see a solution that doesnt require pretty much a duplicate of files.
I want this to work similarly to Next.js locales, where it can basically just prefix example.com/en-US/... to every URL without messing with the routing.
Any suggestions will be greatly appreciated :)
EDIT: Another solution would be to repurpose locales to do this for me, however I'm already using locales for its intended purpose :D
I would probably switch the dynamic routes around. Would something like this work for you?
This way your folder structure would look like this:
- products
--- [category].tsx
- news
--- [category].tsx
The [category].tsx files would contain the code related to their respective folder (news, products, etc.), so you wouldn't have any duplicate files.
If for some reason you need to retain your current page structure, you could use nested dynamic routes, but based on your description I can't think of a good reason why you wouldn't be able to structure it like this.