Next.js Discord

Discord Forum

Accessing the current path the user is on through the app/layout.tsx file

Unanswered
Pond loach posted this in #help-forum
Open in Discord
Pond loachOP
How would I fetch or access the page the user is on in the layout.tsx file. I want to change the components based on the path they are on. Any help is appreciated

Layout.tsx
import "@/styles/globals.css";
import { Metadata, Viewport } from "next";
import { siteConfig } from "@/config/site";
import { fontSans } from "@/config/fonts";
import { Providers } from "./providers";
import { Navbar } from "@/components/navbar";
import clsx from "clsx";
import { Toaster } from "@/components/ui/toaster";

export const metadata: Metadata = {
  title: {
    default: siteConfig.name,
    template: %s - ${siteConfig.name},
  },
  description: siteConfig.description,
  icons: {
    icon: "/favicon.ico",
  },
};

export const viewport: Viewport = {
  themeColor: [
    { media: "(prefers-color-scheme: light)", color: "white" },
    { media: "(prefers-color-scheme: dark)", color: "black" },
  ],
};

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head />
      <body
        className={clsx(
          "min-h-screen bg-background font-sans antialiased",
          fontSans.variable
        )}
      >
        <Providers themeProps={{ attribute: "class", defaultTheme: "dark" }}>
          <div className="relative flex flex-col h-screen">
            <Navbar />
            <main className="container mx-auto max-w-7xl pt-36 px-6 flex-grow">
              {children}
            </main>
          </div>

        </Providers>
        <Toaster />
      </body>
    </html>
  );
}

17 Replies

American Crow
create a client component which uses usePathname and import it into your layout
@American Crow create a client component which uses `usePathname` and import it into your layout
Pond loachOP
So I looked at the docs, but I don't know if it fits for my case. I want to be able to change the Navbar tag based on what path they are on, so if a user is on /dashboard, it would use the dashboardNavbar tag. The navbars are exactly the same component, just with different labels and such. I need to be able to call a function before the layout loads which returns the path, which I then can use to set the correct navigation bar
Would the same solution you suggested work in my case?
American Crow
I am not exactly sure what you mean by Tag but you can do somth like
"use client"
export default function NavbarLoader() {
  const path = usePathname()
  if (path==="/hello") {
    return <Navbar1 />
  }
  return <Navbar2 />
}


and in Layout

...
<NavbarLoader />
...
@American Crow I am not exactly sure what you mean by Tag but you can do somth like tsx "use client" export default function NavbarLoader() { const path = usePathname() if (path==="/hello") { return <Navbar1 /> } return <Navbar2 /> } and in Layout tsx ... <NavbarLoader /> ...
Pond loachOP
Good idea, sadly, I get this error 
 Error: Server Functions cannot be called during initial render. This would create a fetch waterfall. Try to use a Server Component to pass data to Client Components instead.
    at Navbar (./components/navbar.tsx:32:83)


navbar.tsx: https://pastebin.com/FdhEnLQA

navbarLoader.tsx

"use client";

import { usePathname } from "next/navigation";
import { Navbar } from "./navbar";

export default function NavbarLoader() {
  const path = usePathname();
  if (path === "/") {
    return <Navbar />;
  }
  return <Navbar />;
}
Siamese Crocodile
you don't have that many ooptions.
one option is to use
dynamic components
and pass the id in dynamically
@Siamese Crocodile you don't have that many ooptions.
Pond loachOP
Is there a better way of doing what I am trying to accomplish. How would you do it?
Siamese Crocodile
and what exactly is it that you are trying to accomplish?
Siamese Crocodile
i know you dont wanna hear this but like
the best way to do it
is within a nested client component
@Siamese Crocodile is within a nested client component
Pond loachOP
Sorry, I dont understand. Could you link me some docs?