Redirecting Dynamic Routes in NextJs/javascript

Viewed 14

I want to redirect Dynamic Routes in Nextjs(using Javascript) however I am not sure how to do this.

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.

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)

I want to redirect(square brackets represent that it is a dynamic link)

www.mysite.com/[home1]

to

www.mysite.com/[Home1]

So I am not sure if I should be using the redirect option in the next.js config file

https://nextjs.org/docs/api-reference/next.config.js/redirects

or write some middleware.

https://nextjs.org/docs/advanced-features/middleware

What would be the difference between the two? I prefer to use the redirect method as I think the middleware is overkill.

Can anyone provide an example of the redirect method and if time permits the middleware method?

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.

 async redirects() {
    return [
      {
        source: "/place/home1/",
        has: [
          {
            type: "header",
            key: "host",
            value: "localhost:3000",
          },
        ],
        permanent: false,
        destination: "/place/Home1/",
      },
    ];
  },
};
0 Answers
Related