Next.js Discord

Discord Forum

Passing data from page to layout

Answered
Netherland Dwarf posted this in #help-forum
Open in Discord
Avatar
Netherland DwarfOP
Hey! Quick question, I'm trying to pass a string to my layout. I know this is typically frowned upon, but I'm trying to add a back button on the navigation bar, which is rendered on the layout. This back button is only visible on certain routes and passes the url to redirect to on the layout. Is there any way to do this on the server? I used a context to manage this data, but since I'm using a mix of server and client components there is a delay and shifts the DOM once loaded
Answered by B33fb0n3
yes it is possible with server side context like cookies or url or ... incl. server action or route handlers or ... However: this is mostly complicated. It's an interactive element on your site and everything that you said can be waaay easier be archive than using anything serverside

Easier way (clientside): https://nextjs-forum.com/post/1314091270037311518#message-1314225926128668734
View full answer

35 Replies

Avatar
Netherland DwarfOP
For example, the first screenshot needs a back button.
Image
Image
The second doesn't because it renders the menu by default
My current idea is implementing cookies that would handle this for me
Answer
The other option I know would be making a useContext and the issue I had with that is a small delay when it rendered the content
Avatar
@Netherland Dwarf What can I do alternatively?
Avatar
B33fb0n3
Doing it clientside. The „back“ functionality is just „router.back()“ and to get the route (or path) you can use the hook „usePathname“. With that the button is only visible in some routes. So no need for a special context or anything. Then just directly render the button instead of hiding it by default. It will then still be rendered via SSR, but hydrated on client
Avatar
Barbary Lion
I would do it with parallel routes, I did it with breadcrubs inside my layout for every child page.
Avatar
@Netherland Dwarf Oh okay interesting, but wouldn’t that require me to manually type specific routes that would need to have this functionality with the usePathname?
Avatar
B33fb0n3
Yes, you can create for example an array that contains all the needed routes. However: in any other case you need to „define“ this routes as well. So yes, that’s a required step
Avatar
@Barbary Lion I would do it with parallel routes, I did it with breadcrubs inside my layout for every child page.
Avatar
Netherland DwarfOP
I just read the documentation for that, interesting concept I never used it before, looks like a fun thing to try honestly
Avatar
@Barbary Lion I would do it with parallel routes, I did it with breadcrubs inside my layout for every child page.
Avatar
B33fb0n3
Of course you can do all that via the server technically, but you might do complex things that are harder to maintain or just over complicated
Avatar
@B33fb0n3 Yes, you can create for example an array that contains all the needed routes. However: in any other case you need to „define“ this routes as well. So yes, that’s a required step
Avatar
Netherland DwarfOP
Fun fun, is there anything I’d need to do to implement the router so I can access the router.back? Or is this accessible out of the box
Avatar
@Netherland Dwarf Fun fun, is there anything I’d need to do to implement the router so I can access the router.back? Or is this accessible out of the box
Avatar
B33fb0n3
The „useRouter“ hook (where the router comes from) is a nextjs hook. You don’t need to do anything to get this (just import)

Btw.: when you would use parallel routes you need to define the same array 😉
Oh nvm
Avatar
Netherland DwarfOP
I have a component within the layout that is a client
But thanks man, I appreciate it
Avatar
@B33fb0n3 Not really. Exclude it into its own component
Avatar
Netherland DwarfOP
Wait one more thing, in the second screenshot I showed earlier, it goes back to the previous questionnaire question, I currently don’t change the URL so it people can’t just go to questions and I don’t have to verify them accessing it. What can I do in this case?

Another question I had, I know using router.back implicitly goes back to whatever the previous route was, what if I wanted to have them be redirected to the route I want them to without having that issue, it seems like I might have to define both the route and the back route honestly
Avatar
@Netherland Dwarf Wait one more thing, in the second screenshot I showed earlier, it goes back to the previous questionnaire question, I currently don’t change the URL so it people can’t just go to questions and I don’t have to verify them accessing it. What can I do in this case? Another question I had, I know using router.back implicitly goes back to whatever the previous route was, what if I wanted to have them be redirected to the route I want them to without having that issue, it seems like I might have to define both the route and the back route honestly
Avatar
B33fb0n3
You shouldn’t handle a multi step form (setup process) though the url. It’s the same here: yes, it is possible doing that, but it’s over complicated (as you see now on your question). A multi step (input) form is mostly only interactive. So create a client component. It’s fine to have client components. Then replace this „back“ button to a button that just switches back to the previous step
Avatar
@B33fb0n3 You shouldn’t handle a multi step form (setup process) though the url. It’s the same here: yes, it is possible doing that, but it’s over complicated (as you see now on your question). A multi step (input) form is mostly only interactive. So create a client component. It’s fine to have client components. Then replace this „back“ button to a button that just switches back to the previous step
Avatar
Netherland DwarfOP
That was my original plan having it on the multi step form, but if you look on the second screenshot I noticed that the position I want it to be at is the navigation bar in the top. I didn’t know how I’d be able to put this component in the layout container without using an absolute position, even then I don’t know how I can get it exactly positioned right in the container
I just had an idea, what if I have multiple children in my component. The second child would have some random html, and in the layout I can check whether this is supplied, if this is maybe I can either pass a key that contains the back url and access that on the layout if it requires a specific button, I can just pass the button as the html
Avatar
B33fb0n3
Wow that was a lot of information. Do you have a repo or repro where I can see your code? That would help a lot to put the correct components at the correct locations
Avatar
@B33fb0n3 Wow that was a lot of information. Do you have a repo or repro where I can see your code? That would help a lot to put the correct components at the correct locations
Avatar
Netherland DwarfOP
If I'm being honest, I haven't uploaded my code to a repo yet because I haven't had time, but I can show you what everything looks like real quick

This is what my file directory looks like, the profiles/create need to have a back button
Image
This is what the design looks like for the back button
Image
This is the dashboard, you can't see the back button but instead the menu
Image
This is what my layout looks like
import Logo from "@/public/imgs/logo.png"
import Image from "next/image";

import { getDashboardUser } from "@/lib/server/user/getDashboardUser";

import { ServerProps } from "@/lib/types/Server";
import { SidebarMenu } from "./_components/nav/SidebarMenu";
import { DashboardLayoutClient } from "./_components/layout/layout";


export default async function DashboardLayout(props: ServerProps) {
    const user = await getDashboardUser();
    
    return (
        <div className="">
            <div className="flex h-svh">
                <aside className="hidden lg:flex px-5 pt-5 pb-4 flex-col gap-10 min-w-[170px] ">
                    <Image className="w-[40px] h-auto" src={Logo} alt="AthleticScholar Logo" width={50} height={50} />

                    <div className="flex-1 flex flex-col justify-between">
                        <SidebarMenu heading="Menu" menu={[{ 'page': "Dashboard", 'icon': "dashboard", isActive: true }, { page: "Profiles", icon: "profiles" }, { page: "Messages", icon: "inbox" }]} />
                        <SidebarMenu heading="Other" menu={[{ 'page': "Settings", 'icon': "settings" }, { page: "Log out", icon: "logout" }]} />
                    </div>
                </aside>

                <div className="flex flex-col px-5 pt-5 pb-4  flex-1 gap-6 overflow-auto">
                    <DashboardLayoutClient user={user} />

                    <main className="flex-1 lg:px-6 lg:py-6 lg:bg-secondary lg:border lg:border-border lg:rounded-xl">
                        {props.children}
                    </main>

                </div>
            </div>
        </div>


    )
}
This is the DashboardLayoutClient, mind you this is a client component
export function DashboardLayoutClient({ user }: Props) {


    return (
        <>
            <div className="hidden lg:flex lg:justify-between">
                <div className="flex gap-5">
                    <Image className="rounded-full object-cover h-[45px] w-[45px]" src={user?.image} alt={`${user.name}'s Thumbnail`} width={45} height={45} />

                    <div className="flex flex-col gap-1">
                        <h1 className="font-medium text-base tracking-tight">{user.name}</h1>
                        <span className="text-sm text-text-secondary">Athlete</span>
                    </div>
                </div>

                <div>
                    <NotificationButton />
                </div>

            </div>

            <DashboardMobileLayout />
        </>
    )
}
and lastly
My profiles/create page
export default function CreateProfile() {
    const [step, updateStep] = useState(1)

    return (
        <Wrapper>
            <StepperWithHeader className=" lg:w-full lg:top-[20px]" amount={3} current={step} >
                <span className="text-sm text-text-label lg:text-center"><span className="text-white">Step {step}</span> out of 3</span>
            </StepperWithHeader>

            <PageHeading heading="Build Your Winning Profile" subheading="Craft your profile with the details that make you an attractive recruit" />
        </Wrapper>
    )
}
Avatar
B33fb0n3
ok and where exactly is now the problem in wrapping them correctly?

As you see, that's a lot of effort right now, so the best for me as well as for you is to create a repo
Avatar
Netherland DwarfOP
All good, ended up just making a component for my layout!
Avatar
B33fb0n3