vercel
Docs: Confusing/Incomplete docs for setting page title (App Router)
What is the update you wish to see?
Make it easier to find how to update the page title for App Router.
Even with a long search the only thing I could find about setting the page title is https://nextjs.org/docs/app/api-reference/functions/generate-metadata and this only works for server components. I use client components, so what would I use instead? Even after a long time searching in the docs I can't find it.
In the docs to generateMetadata there is a "Good to know" at the top which states that it works only with server components. Please in this same area refer to how to set the title with client components. If it's not possible, write that in there.
Is there any context that might help us understand?
I am using Next.js for many years now and the app router since around one year. I just now spent 30 minutes on trying to find how to set the page title and can't make it work. It's so frustrating and I feel it should be so simple and actually it was so simple with how it was before the app router, just using Head.
Just to clarify, I am not even looking for an answer here, I just want the docs to be updated so that others like me can find the answer quicker, or at all.
Does the docs page already exist? Please link to it.
No response
I found this discussion and it seems that it is not possible for client components to update the page title, or only via document.title = .... So would be great to have that information in the docs.
Just finding this as well, I am not a Next user (just picked up a project that uses it) and based on the frustrating documentation search I just went through, I don't plan to become one. My workaround was to use react-helmet and just ignore SSR entirely. I wasn't the one who chose to use "client components" in this case, so all I know is that they're needed for my use case and thus I am SOL using what Next provides me.
@Badestrand Thank you for submitting an issue!
In the docs to generateMetadata there is a "Good to know" at the top which states that it works only with server components. Please in this same area refer to how to set the title with client components. If it's not possible, write that in there.
Curious: is there a reason why you can't have a Server Component for setting the title, which then could wrap your Client Component?
@Badestrand Thank you for submitting an issue! Curious: is there a reason why you can't have a Server Component for setting the title, which then could wrap your Client Component?
For example when the title depends on search parameters (...?language=fr) or the page depends on literally anything (useXXX).
For the second case probably it would work to split every single page into two files, one server component that sets the title and then the actual page as a child client component. But that's a lot of work and bloat just to being able to set the title.