Route Handling Scenario
Unanswered
Bigeye tuna posted this in #help-forum
Bigeye tunaOP
What is the best way to implement the following scenario:
I want to have a public facing sign up page where the route is the root '/'. After a user signs in, he is redirected to the layout and pages associated with being signed in, but the url still remains '/'.
I understand how to do this with naming the routes to '/signup' or '/home', but is there a way to have both be '/'
I want to have a public facing sign up page where the route is the root '/'. After a user signs in, he is redirected to the layout and pages associated with being signed in, but the url still remains '/'.
I understand how to do this with naming the routes to '/signup' or '/home', but is there a way to have both be '/'
33 Replies
yes, you can use [parallel routes](https://nextjs.org/docs/app/building-your-application/routing/parallel-routes) for that. Check inside your page if the user is signed in. If so, render the user page else render the sign in page.
Of course you can do it with middleware as well...
Of course you can do it with middleware as well...
Bigeye tunaOP
I wanted to utilize parallel routes for this, but the issue I came across is the not-found page does not render for the parallel route
can you share the folder structure for this? Maybe even share a repro so I can test a lot myself. Common websites for repro are github or [codesandbox.io](https://codesandbox.io/)
Bigeye tunaOP
I can share a repo if you want. I could also hop on a call if you are available now
yea, feel free to share your repro 🙂
Bigeye tunaOP
@B33fb0n3 let me know if you are able to view it
Thanks for sharing it. I just created a workable repro so we can edit files as well. Check the following link: https://codesandbox.io/p/github/logs123/parallel-routing/csb-tzzkd8/draft/pensive-cookies
Make sure you see the "not found"-code inside the "AdminHome" (green arrow).
If you can't see it, let me know then I describe you what the main issue was and what the main solution is
Make sure you see the "not found"-code inside the "AdminHome" (green arrow).
If you can't see it, let me know then I describe you what the main issue was and what the main solution is
Bigeye tunaOP
I just opened it up
yes, do you see that line?
Bigeye tunaOP
Yes, I see the import and commented out part
perfect. You should also see, that I deleted the "@user", as the page itself (children) are the user page (just a default). Then, if there is no admin route (when visiting admin) the children will be visible.
The main issue here is, that only the children render also the not-found. So to see the not-found, you need to render the children, when one route (see green arrow).
The rest is just part of the solution
The main issue here is, that only the children render also the not-found. So to see the not-found, you need to render the children, when one route (see green arrow).
The rest is just part of the solution
Bigeye tunaOP
But in the admin slot, it is not possible to get to the NotFound page
Bigeye tunaOP
Interesting. On my local system, the notfound page does not render
maybe I can publish the code. However it loads like 25min... so maybe I don't have enough permissions to push to the repo or something
The branch itself should be there. You maybe still using your main branch. So you can merge both together if needed 👍
Bigeye tunaOP
I copied your changes exactly. Just on my local, the notfound does not show
Do you see it working inside the codesandbox?
Bigeye tunaOP
Yes the code preview shows the notfound
So now I wonder why it doesn't show on my local
check your local layout.tsx and check if you added this one: https://nextjs-forum.com/post/1318313452238012437#message-1318331263513395210 <-------- click and see green arrow
Bigeye tunaOP
Yup, added that
hmm do you see something that is different to the repro?
Bigeye tunaOP
If I comment out the notFound line at the top of the AdminHome, and then I attempt to reach a fake URL (/test), then the notFound page briefly shows and shows this error:
Missing required html tags
The following tags are missing in the Root Layout: <html>, <body>.
Read more at https://nextjs.org/docs/messages/missing-root-layout-tags
Missing required html tags
The following tags are missing in the Root Layout: <html>, <body>.
Read more at https://nextjs.org/docs/messages/missing-root-layout-tags
Also, if the line isn't commented out, then the main page content is blank
oh yea, I missed that. I also modified the whole not-found file and added that 🙂
Make sure you doing that too
Make sure you doing that too
Bigeye tunaOP
Seems to render the NotFound now without that error. However, clicking the 'Return Home' renders this error on the client:
Application error: a client-side exception has occurred (see the browser console for more information).
And this in the console:
TypeError: initialTree is not iterable
at applyPatch (apply-router-state-patch-to-tree.js:18:53)
at applyRouterStatePatchToTree (apply-router-state-patch-to-tree.js:75:30)
at eval (navigate-reducer.js:203:88)
The above error occurred in the <Router> component. It was handled by the <ErrorBoundaryHandler> error boundary.
Application error: a client-side exception has occurred (see the browser console for more information).
And this in the console:
TypeError: initialTree is not iterable
at applyPatch (apply-router-state-patch-to-tree.js:18:53)
at applyRouterStatePatchToTree (apply-router-state-patch-to-tree.js:75:30)
at eval (navigate-reducer.js:203:88)
The above error occurred in the <Router> component. It was handled by the <ErrorBoundaryHandler> error boundary.
hmm are you using any kind of other router than nextjs?
Bigeye tunaOP
"dependencies": {
"react": "^19.0.0",
"react-dom": "^19.0.0",
"next": "15.1.0"
},
"devDependencies": {
"typescript": "^5",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"postcss": "^8",
"tailwindcss": "^3.4.1",
"eslint": "^9",
"eslint-config-next": "15.1.0",
"@eslint/eslintrc": "^3"
}
"react": "^19.0.0",
"react-dom": "^19.0.0",
"next": "15.1.0"
},
"devDependencies": {
"typescript": "^5",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"postcss": "^8",
"tailwindcss": "^3.4.1",
"eslint": "^9",
"eslint-config-next": "15.1.0",
"@eslint/eslintrc": "^3"
}
Bigeye tunaOP
This error gets removed if there is no slot present
@Bigeye tuna hmm pretty weird... I guess I have no solution for that. Sorry
the best way is to do it like the giants do. maintain two different pages
github: https://github.com/home and https://github.com/dashboard
vercel: https://vercel.com/home and https://vercel.com/dashboard
trying to fit the source code of both pages to the same
/home and /dashboard and rewrite from / to the correct page based on the auth state.github: https://github.com/home and https://github.com/dashboard
vercel: https://vercel.com/home and https://vercel.com/dashboard
trying to fit the source code of both pages to the same
/ will only complicate your codebase for no gains. don't do that.