Dynamically update document title in next app router
Unanswered
American black bear posted this in #help-forum
American black bearOP
Hi, I was wondering how do you dynamically update the page title new that next/head is gone. With dynamically I mean for example whenever a user presses a button you encrement a count in the document title.
17 Replies
that's from a page, from a click you can just change
document.title directlyAmerican black bearOP
so we went from having a component for it back do maniulating the dom api directly?
Shy Albatross
why do you want Next to do the most basic thing for you?
if you'd use next/head for this before, then you'd use it wrong
American black bearOP
no its def fine, just a bit weird thats all the going back to browser apis. I did not use it this way but I used it for example to change the title of the page based on data from a client side request
Shy Albatross
right, so I gave the link to how you would do that from a page
you want to do that in the client code, then you can do that with or without React, tied to some component state
American black bearOP
the link you send does not work in this case? since the context you have is does not really have access to client state right? Yup just wanted to confirm since before you could use next/head to update the title based on client state.
Thanks for your response 😊
Shy Albatross
the fact you could have doesn't mean you should have
American black bearOP
where does it say you should not rerender this client side? https://nextjs.org/docs/pages/api-reference/components/head
@American black bear Hi, I was wondering how do you dynamically update the page title new that next/head is gone. With dynamically I mean for example whenever a user presses a button you encrement a count in the document title.
if you're using app router, use the metadata API
generateMetadata is how you dynamically change meta tags including title.All metadata-related solutions above do not work because metadata exports cannot be mutated by client side states unlike the old <Head />
@joulev All metadata-related solutions above do not work because metadata exports cannot be mutated by client side states unlike the old <Head />
Oh my bad, I wasn't aware they were trying to mutate from the client 