Next.js Discord

Discord Forum

How to get pathname on RootLayout

Unanswered
Satin Angora posted this in #help-forum
Open in Discord
Satin AngoraOP
Hey guys,
I have a question, i have this code on my layout
import type { Metadata } from "next"

import { Footer } from "@/components/Footer"
import { Header } from "@/components/Header"
import { SideBarMenu } from "@/components/SidebarMenu"
import Providers from "@/app/providers"

import "@/app/globals.css"

import layout from "./styles"

export const metadata: Metadata = {
  title: "Pedropcruz Portfolio App",
  description: "Passionate Frontend Developer",
}

const { body, mainWrapper, sidebarSpace } = layout()

export async function generateStaticParams() {
  return [{ locale: "en" }, { locale: "pt" }]
}

export default function RootLayout({
  children,
  params: { locale },
}: {
  children: React.ReactNode
  params: { locale: string }
}) {
  console.log(document)
  return (
    <html lang={locale} style={{ colorScheme: "light" }} className={body()}>
      <body className={body()}>
        <Providers params={{ locale }}>
          <SideBarMenu />
          <div className={sidebarSpace()}>
            <Header />
            <main className={mainWrapper()}>{children}</main>
            <Footer />
          </div>
        </Providers>
      </body>
    </html>
  )
}


I am using tailwind-variants and my question is how I can get the pathname on RootLayout? I already tried to use middleware approach and I didnt get anything, because My middleware it's only being use on specific routes.

Many thanks

2 Replies

Shy Albatross
if it's receiving params then it cannot be a root layout, since it's nested under some dynamic segment(s)
so you should have a root layout above your [locale] and that renders html & body, then your layout under [locale] renders the rest, if you make this layout a client component then you can read the pathname https://nextjs.org/docs/app/api-reference/functions/use-pathname