I have Route in the following structureroot -- (home)/ -- myitems/ -- assigned-to-me/ page.js -- created-by-me/ page.js page.js layout.jsNow when we navigates to myitmes i wish to automatically land on /myitems/assigned-to-me path. As of now i am using next.config.js file with defined redirection but it feels like poor dx and i dont expect my developers switch over multiple files to see how the flow works.Instead i am expecting some thing like component in react-router. I understand i can achieve the same using client-component with next/router's redirect method. it would cause two client round trip to server. Since i am already on the server, is they any better way to perform server side re-direction from myitems/page.js. Note: I also played with middleware, but doing redirection from middleware did not render nested component with styles, as it is performing redirection before the render of pages.

What is the effective solution for landing on sub-route path when hitting the parent route url?

Unanswered

Polar bear posted this in #help-forum

Polar bearOP

2023-09-27T04:00:47.000Z

I have Route in the following structure

root
  -- (home)/
      -- myitems/
           -- assigned-to-me/
                   page.js
           -- created-by-me/
                   page.js
           page.js
           layout.js

Now when we navigates to myitmes i wish to automatically land on /myitems/assigned-to-me path.
As of now i am using next.config.js file with defined redirection but it feels like poor dx and i dont expect my developers switch over multiple files to see how the flow works.

Instead i am expecting some thing like <Redirect /> component in react-router. I understand i can achieve the same using client-component with next/router's redirect method. it would cause two client round trip to server.

Since i am already on the server, is they any better way to perform server side re-direction from myitems/page.js.

Note: I also played with middleware, but doing redirection from middleware did not render nested component with styles, as it is performing redirection before the render of pages.

6 Replies

Clown

2023-09-27T05:08:45.000Z

Tbh using next.config would definitely be better but you can use redirect()

https://nextjs.org/docs/app/api-reference/functions/redirect

Polar bearOP

2023-09-27T05:13:54.000Z

thanks @Clown . I missed to notice that redirect can be used inside server component. Any reason why next.config would be better place to have redirect mappings.

Clown

2023-09-27T05:17:09.000Z

Redirect in the config provides a lot of freedom in how to redirect and stuff

Also it will be a single point where all your redirects can be stored.

Also redirects in the config are checked BEFORE the pages.

Polar bearOP

2023-09-28T04:06:38.000Z

Got your point @Clown , I have different openion on that the main use case of redirect in the config is for version upgradation, route deprecation, want to have a fallback for old url thats been shared in the internet. while the application level redirection should reside inside the code flow so that when walking though the code it will easy to see the application flow. anyways.

As i am new to nextJs, majorly workign in SPAs, I have another questions ,
I have list of links beeing formed inside the subroute, <link href="<parent-path-segment>/<current-subroute-segment>/<new-subroute-segment>"> then new-subroute-segment is being displayed as model.

I want to get the parent-path-segment and current-subroute-segment from nested subroute to frame the url, else it requires me to hard code the value of parent in the link.

I can do this inreact-router-dom using current route object. but sinec useRouter is meant for client component, i could not use it in server component.

Any suggestion.