Next layout app router
Answered
White Swiss Shepherd Dog posted this in #help-forum
White Swiss Shepherd DogOP
Currently I try to build a layout for a settings page where you can go to settings/account, settings/notifications and have the same layout. Right now I have a settings directory in my app folder with a layout.tsx and it works fine. In that directory I have 2 directories one with “notifications” and one with “account” both with a page.tsx file that serves the content.
Problem right now is when people are trying to go to /settings you get a 404 page, my goal is to let the user automatically go to /settings/page when they try to enter the /settings route.
Is this possible or would I be better of using the account it’s [paget.](http://paget.sx)tsx in the settings directory?
Problem right now is when people are trying to go to /settings you get a 404 page, my goal is to let the user automatically go to /settings/page when they try to enter the /settings route.
Is this possible or would I be better of using the account it’s [paget.](http://paget.sx)tsx in the settings directory?
Answered by Clown
You can create a redirect using 3 ways:
1) Redirect using a page on settings route.
2) Middleware
3) use the next config(what i personally prefer for these cases):
https://nextjs.org/docs/pages/api-reference/next-config-js/redirects
1) Redirect using a page on settings route.
2) Middleware
3) use the next config(what i personally prefer for these cases):
https://nextjs.org/docs/pages/api-reference/next-config-js/redirects
11 Replies
@White Swiss Shepherd Dog Currently I try to build a layout for a settings page where you can go to settings/account, settings/notifications and have the same layout. Right now I have a settings directory in my app folder with a layout.tsx and it works fine. In that directory I have 2 directories one with “notifications” and one with “account” both with a page.tsx file that serves the content.
Problem right now is when people are trying to go to /settings you get a 404 page, my goal is to let the user automatically go to /settings/page when they try to enter the /settings route.
Is this possible or would I be better of using the account it’s [paget.](http://paget.sx)tsx in the settings directory?
You can just add a page.tsx in the settings directory? Do you want to be redirected to one of the routes inside settings page? Or do you want a separate page?
Asian black bear
To ensure you get the best possible assistance, could you please change your thread title to be more descriptive? Specific titles attract the attention of users who can help and make it easier for others to find similar solutions in the future.
@Clown You can just add a page.tsx in the settings directory? Do you want to be redirected to one of the routes inside settings page? Or do you want a separate page?
White Swiss Shepherd DogOP
i don't want users to go to /settings, instead I want users to be redirected to the settings/account page
so when users go to /settings they will go to settings/account automatically
Can you try to create a page.tsx on the
settings and redirect to the route you want ?White Swiss Shepherd DogOP
i thought of this solution but was wondering if there was another solution
seems weird to make a page.tsx that only redirects if you feel me
Other solution is to redirect in the middleware.ts
@White Swiss Shepherd Dog i thought of this solution but was wondering if there was another solution
You can create a redirect using 3 ways:
1) Redirect using a page on settings route.
2) Middleware
3) use the next config(what i personally prefer for these cases):
https://nextjs.org/docs/pages/api-reference/next-config-js/redirects
1) Redirect using a page on settings route.
2) Middleware
3) use the next config(what i personally prefer for these cases):
https://nextjs.org/docs/pages/api-reference/next-config-js/redirects
Answer
And here's the docs for redirection in general:
https://nextjs.org/docs/app/building-your-application/routing/redirecting
https://nextjs.org/docs/app/building-your-application/routing/redirecting
White Swiss Shepherd DogOP
Thanks❤️