title: Redirecting Dynamic Routes in NextJs/javascript
body: <p>I want to redirect Dynamic Routes in Nextjs(using Javascript) however I am not sure how to do this.</p>
  <p>My /path is important because the app uses that to query a lot of data on the backend and return results. So whatever method I choose has to run (or be made to run) before any Javascript is executed (which is why I think the redirect method is best). My site has CSR,SSR and SSG in it.</p>
  <p>But just to be sure, Does anyone know when would would the redirect method run compared to the middleware method? I need the actual request to be changed before hitting the application (from home1 to Home1)</p>
  <p>I want to redirect(square brackets represent that it is a dynamic link)</p>
  <p><a href="http://www.mysite.com/%5Bhome1%5D" rel="nofollow noreferrer">www.mysite.com/[home1]</a></p>
  <p>to</p>
  <p><a href="http://www.mysite.com/%5BHome1%5D" rel="nofollow noreferrer">www.mysite.com/[Home1]</a></p>
  <p>So I am not sure if I should be using the redirect option in the next.js config file</p>
  <p><a href="https://nextjs.org/docs/api-reference/next.config.js/redirects" rel="nofollow noreferrer">https://nextjs.org/docs/api-reference/next.config.js/redirects</a></p>
  <p>or write some middleware.</p>
  <p><a href="https://nextjs.org/docs/advanced-features/middleware" rel="nofollow noreferrer">https://nextjs.org/docs/advanced-features/middleware</a></p>
  <p>What would be the difference between the two? I prefer to use the redirect method as I think the middleware is overkill.</p>
  <p>Can anyone provide an example of the redirect method and if time permits the middleware method?</p>
  <p>I tried something for this for the redirect method and placed it in my next.config.js but no luck. Home1 here is dynamic and goes all the way up to home5.</p>
  <pre><code> async redirects() {
      return [
        {
          source: &quot;/place/home1/&quot;,
          has: [
            {
              type: &quot;header&quot;,
              key: &quot;host&quot;,
              value: &quot;localhost:3000&quot;,
            },
          ],
          permanent: false,
          destination: &quot;/place/Home1/&quot;,
        },
      ];
    },
  };
  </code></pre>