I'm currently looking at an interesting task with rewrites.

I currently have the below in my next.config.js file for a set of URL's that are to be permanently redirected:

redirects: async () => {
    return [
      {
        source: '/shop/en/products/:slug',
        destination: '/product/:slug',
        permanent: true
      }
    ];
  },

I've noticed that a fair few of them aren't in a uniform format. Some contain special characters, some contain multiple dashes, etc.

* example-1: url-slug---10-pack
* example-2: url-slug-%28online-only%29

I was wondering how to go about managing these in a more dynamic way? At present we require an 'SEO' friendly slug to be passed to our API on the server side, which then returns the product data.

I would like to rewrite the URL's to be more SEO friendly, and also update the URL in the browser to reflect the new URL. Is there a 'best practice' way of doing this? My initial thoughts is to run the slug through a utility function that will remove special characters, replace spaces with dashes, etc and then use that as the new URL but I'm not sure how to update this on the client (preferably without a useEffect?)