Next.js Discord

Discord Forum

Get title of page

Unanswered
Sun bear posted this in #help-forum
Open in Discord
Sun bearOP
How can I get the title of the current page? i.e., the one set in the Metadata

47 Replies

Giant panda
What for exactly?
Sun bearOP
to show on the page 🙂
Giant panda
Is the title dynamic?
If so, use the same logic to fetch the title in the page component
export async function generateMetadata() {
  const title = await fetchTitle()
  return { title }
}

export async default function Page() {
  const title = await fetchTitle()
  return <h2>{title}</h2>
}
riský
and if you are feeling fancy, you can use in react cache so only one request is sent per render
Sun bearOP
I'd like to do it in a component or layout
so I don't know how the page component did it
Giant panda
You shouldn't really fetch in a layout if you can avoid it, but it doesn't matter where you fetch
You can just fetch in the generateMetadata function and exactly where you need it
Sun bearOP
really, it's not dynamic. But it shouldn't matter
Giant panda
And as Risky said using cache you can apply request memoization
If it's not dynamic then hardcode the title?
hardcode it where?
riský
if its static, you can just use the exported metdata object
Sun bearOP
from which page?
riský
the same page
Sun bearOP
it could be any page
Giant panda
But you said it's not dynamic
Sun bearOP
it's not
every page has a different title, no?
static or not
export default function PageTitle() {
  const title = usePageTitle(); // TODO
  return <div>The title of this page is: {title}</div>;
}

hopefully this clarifies things a bit?
Giant panda
export const metadata = { title: 'Foo' }

export async default function Page() {
  return <h2>{metadata.title}</h2>
}
Sun bearOP
I want to write a generic component that can be used on any page that displays the title of whatever page the component was used on
Giant panda
Invert the dependency
Don't attempt to read the title from the component
And just pass it down via props
Sun bearOP
I'm really surprised this is impossible 😄
Giant panda
Because it's needlessly complex trying to deduce which page a component is running on and server components typically don't know anything about the context they are mounted in
So you can't work bottom-up
You pass data top-down or fetch if possible where you need it
Sun bearOP
idk why I wanted to make it so complicated.... document.title 🤦
Giant panda
That won't work and will not be SEO-capable
Sun bearOP
define won't work
it works 😄
Giant panda
First of all, it's completely pointless if you already have the title server-side. This means it won't appear for crawlers.
Second, by moving it to the client-side you delay the rendering of it making the page slower.
Third, if you don't do it properly within an effect you will have classic errors during prerendering.
Sun bearOP
the first two are not concerns for me. Can you elaborate on the third?
Giant panda
There is no document object available during server-side prerendering. So you will get errors attempting to access document.title if you don't do that after the component has been hydrated on the client.
Sun bearOP
can you help me understand why this is a problem even for client components?
Giant panda
Because client components are still prerendered on the server
Sun bearOP
I see
Sun bearOP
well, this is disappointing, but thank you both for your suggestions!
Gouty oak gall
You didn't happen to figure it out Panda? Trying to find a solution for the same issue..
I want to make an analytics component, and the current title should be a part of the analytics data. This project has many different kinds of pages, and many of them implement metadata in a different way. It would take a huge amount of work to refactor title generation into an independent module in this case. document.title would be perfect, if it wasn't for the pre-rendering issue 😕
I'm a bit surprised that Next.js's Metadata API doesn't provide a way to get the current metadata, in a similar fashion to how it's possible to get the page URL path or URL parameters with usePathname or useSearchParams.
Gouty oak gall
No wait.. Should've read more carefully 😅
if you don't do it properly within an effect you will have classic errors during prerendering
The pre-rendering issue is avoided by accessing document.title within useEffect