Change Layout (for dashboard)
Answered
Savannah posted this in #help-forum
SavannahOP
Good evening, I've made my account creation and connection system with next-auth, I manage the user's authentication with the middleware and I'd like to redirect him to a dashboard when he's connected. The problem is that the layout doesn't want to change (it remains the same as the one at the root of the “app” folder, but I'd like it to become the one in the “dashboard” folder).
Attached is a screen of my project's tree structure
Attached is a screen of my project's tree structure
Answered by Madeiran sardinella
The problem is that the dashboard layout is nested into root layout, you can create a route group for (non-dashboard-routes), create a layout into that group and delete current root layout or just move the part you don't need in dashboard to the non-dashboard layout
20 Replies
Madeiran sardinella
The problem is that the dashboard layout is nested into root layout, you can create a route group for (non-dashboard-routes), create a layout into that group and delete current root layout or just move the part you don't need in dashboard to the non-dashboard layout
Answer
@Madeiran sardinella The problem is that the dashboard layout is nested into root layout, you can create a route group for (non-dashboard-routes), create a layout into that group and delete current root layout or just move the part you don't need in dashboard to the non-dashboard layout
SavannahOP
src
└── app
├── (pages)
│ ├── layout.tsx
│ └── ... other non-dashboard pages in folders
├── dashboard
│ ├── layout.tsx
│ └── ... other dashboard pages in folders
├── components
├── lib
├── types
├── styles
├── api
└── ... other files
Thanks for your answer ! Is it good if i did something like that ? 😉
└── app
├── (pages)
│ ├── layout.tsx
│ └── ... other non-dashboard pages in folders
├── dashboard
│ ├── layout.tsx
│ └── ... other dashboard pages in folders
├── components
├── lib
├── types
├── styles
├── api
└── ... other files
Thanks for your answer ! Is it good if i did something like that ? 😉
Madeiran sardinella
Yeah, that's perfect! 👌🏾
@Madeiran sardinella Yeah, that's perfect! 👌🏾
SavannahOP
Thanks, i'll do that and let you know if it works 😉
@Madeiran sardinella Yeah, that's perfect! 👌🏾
SavannahOP
Perfect, it's working for me ! Thanks a lot bro 😉
@Savannah Perfect, it's working for me ! Thanks a lot bro 😉
Madeiran sardinella
That's great! Your welcome bro!
@Madeiran sardinella That's great! Your welcome bro!
SavannahOP
Could I ask you a question I have about api logic with next-js by any chance please?
Madeiran sardinella
Yes man, ofcourse!
@Madeiran sardinella Yes man, ofcourse!
SavannahOP
Why dice when I want to use an api like below (which I see everywhere, even in the official next-js doc) => with the handler :
It gives me an error and tells me to use either a POST or a GET (instead of the handler as in the documentation)
import type { NextApiRequest, NextApiResponse } from 'next'
export default async function handler(
req: NextApiRequest,
res: NextApiResponse
) {
const data = req.body
const id = await createItem(data)
res.status(200).json({ id })
}It gives me an error and tells me to use either a POST or a GET (instead of the handler as in the documentation)
Madeiran sardinella
Because you are in app router
That "handler" method that you see in documentation is for pages router
Madeiran sardinella
In app router you should use GET, POST, ...
@Madeiran sardinella In app router you should use GET, POST, ...
SavannahOP
Okay, there is a difference between pages router and app router ?
Madeiran sardinella
Yes, there is
App router allows you to use server components, streaming and all new features from next 14
Anyway, you can use the page directory for API routes if you prefer
SavannahOP
Mmmh, okay. I think i'll stay on app router because it's recommanded when creating projects with npx ^^
Then, thanks for your advices and your explanations bro ! Appreciate it 😉
Madeiran sardinella
It's not big deal