Next.js Discord

Discord Forum

How can I update an <h1> in my parent layout from some route?

Unanswered
American black bear posted this in #help-forum
Open in Discord
Avatar
American black bearOP
I have the following root app layout
export default async function AppLayout(props) {
  const me = await getMe();

  return (
    <>
      <div className="min-h-full bg-gray-100">
              <h1 className="text-3xl font-bold leading-tight tracking-tight text-gray-900">
                {/*how can i make this dynamic?*/}
                Dashboard
              </h1>
              {props.children}

      </div>
    </>
  );
}



Is it possible to update the word Dashboard for every page? I tried making the h1 a client component and then on my pages updating the state with zustand/jotai and with both i experience the same problem. it does work, but then there first will be no title because its coming from the server without one and after a second the title will appear. this sucks. is there no better way to do this?

2 Replies

Avatar
Sun bear
That is not really possible or like you mentioned complex and I would say not the common way to do it.

I would creste a component like

<TitleComponent>your title</TitleComponent>

And just add it in every page.tsx or layout.tsx where you need it.
Avatar
Sun bear
In case you want to make it dynamic you could do it like this

export default function DynamicTitle() {
const pathname = usePathname()
return (
<h1>{pathname}</h1>
)
}


Most likely you need a mapping of path and title to make it look better or just split by / and use the last part