Next.js Discord

Discord Forum

accessing params in a layout.tsx

Answered
Wool sower gall maker posted this in #help-forum
Open in Discord
Wool sower gall makerOP
how can i access params in a layout.tsx?
e.g. i need to access the params.guild id from my [guildId] route
export function DashboardNav({items, params}: DashboardNavProps) {
    const path = usePathname()
    console.log(path)


    if (!items?.length) {
        return null
    }

    return (
        <nav className="grid items-start gap-2">
            {items.map((item, index) => {
                const Icon = Icons[item.icon || "arrowRight"]
                return (
                    item.href && (
                        <Link key={item.title} href={item.disabled ? "/" : `/menu/dashboard/${params.guildId}${item.href}`}>
                            <span
                                className={cn(
                                    "group flex items-center rounded-md px-3 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground",
                                    path === item.href ? "bg-accent" : "transparent",
                                    item.disabled && "cursor-not-allowed opacity-80"
                                )}
                            >
                                <Icon className="mr-2 h-4 w-4"/>
                                <span>{item.title}</span>
                            </span>
                        </Link>
                    )
                )
            })}
        </nav>
    )
}
Answered by Clown
https://nextjs.org/docs/app/api-reference/functions/use-search-params#server-components
View full answer

7 Replies

Wool sower gall makerOP
the layout

export default async function DashboardLayout({
                                                  children, params
                                              }: DashboardLayoutProps) {
    const user = await getCurrentUser()

    if (!user) {
        return notFound()
    }


    return (
        <div className="flex min-h-screen flex-col space-y-6">
            <header className="sticky top-0 z-40 border-b bg-background">
                <div className="container flex h-16 items-center justify-between py-4">

                    <MainNav items={dashboardConfig.mainNav}/>
                    <UserAccountNav
                        user={user.result} items={dashboardConfig.sidebarNav}
                    />
                </div>
            </header>
            <div className="container grid flex-1 gap-12 md:grid-cols-[200px_1fr]">
                <aside className="hidden w-[200px] flex-col md:flex">
                    <DashboardNav items={dashboardConfig.sidebarNav} params={params}/>
                </aside>
                <main className="flex w-full flex-1 flex-col overflow-hidden">
                    <BackButton href="/menu" className="w-[90px]"></BackButton>
                    {children}
                </main>
            </div>
            <SiteFooter className="border-t"/>
        </div>
    )
}
Answer
Clown
Not a good idea overall. Layout usually doesnt change on re-renders and navigations so its going to be stale too
@Clown Not a good idea overall. Layout usually doesnt change on re-renders and navigations so its going to be stale too
Wool sower gall makerOP
it doesn't have to be it's about the links in the sidebar that need to be updated, this is a client component. but i need the guild id so i can put the link on the right page
in short how can I get the guildId in my DashboardNav component?
Wool sower gall makerOP
ah i got it i just needed to pass the layout one folder down