Change Head tags on the client (like meta tags)

Answered

Southeastern blueberry bee posted this in #help-forum

Southeastern blueberry beeOP

2023-10-09T16:34:33.000Z

I have a theme context that switches the theme on runtime with a button, i wanted to update the meta tag theme-color, how can i update it? i've seen only how to add static metadata so far using the export const metadata but not how to change this at runtime on the client

Answered by Southeastern blueberry bee

yeah that's what i was searching but it doesn't seem to be possible, except the way u mentioned might work by chainging the layout to be a client component but i'm not even sure if that works

View full answer

33 Replies

@Southeastern blueberry bee I have a theme context that switches the theme on runtime with a button, i wanted to update the meta tag `theme-color`, how can i update it? i've seen only how to add static metadata so far using the `export const metadata` but not how to change this at runtime on the client

Clown

2023-10-09T16:53:24.000Z

https://nextjs.org/docs/app/building-your-application/optimizing/metadata#dynamic-metadata

@Clown https://nextjs.org/docs/app/building-your-application/optimizing/metadata#dynamic-metadata

Southeastern blueberry beeOP

2023-10-09T16:54:21.000Z

that is server side, i need it client side

Clown

2023-10-09T16:54:41.000Z

I dont think you should be using metadata tags tbh

Atleast not for this

Is there some specific reason you are doing this?

@Clown Is there some specific reason you are doing this?

Southeastern blueberry beeOP

2023-10-09T16:56:18.000Z

i've described the issue in the description, users decide to change the theme, so i want to change the theme-color meta tag propriety

<Head>
  <meta name="theme-color" content={theme.getColor('primary').toString()}/>
</Head>

this is some code i used in another project that has pages router

Clown

2023-10-09T16:56:57.000Z

Then just do it in the root layout

Southeastern blueberry beeOP

2023-10-09T16:57:04.000Z

i mean i can just do dom access but would be better if there was a native way

@Clown Then just do it in the root layout

Southeastern blueberry beeOP

2023-10-09T16:57:15.000Z

yeah but it won't change at runtime in the client, only server side

Clown

2023-10-09T16:57:21.000Z

Im pretty sure there isnt any other way

@Southeastern blueberry bee yeah but it won't change at runtime in the client, only server side

Clown

2023-10-09T16:57:27.000Z

Uh no?

Southeastern blueberry beeOP

2023-10-09T16:57:30.000Z

i already have it in the root layout currently

but it's server only

Clown

2023-10-09T16:57:45.000Z

This should just work

@Southeastern blueberry bee i've described the issue in the description, users decide to change the theme, so i want to change the `theme-color` meta tag propriety ts <Head> <meta name="theme-color" content={theme.getColor('primary').toString()}/> </Head> this is some code i used in another project that has pages router

Clown

2023-10-09T16:58:25.000Z

That theme variable is from a context right?

Southeastern blueberry beeOP

2023-10-09T16:58:29.000Z

yup

Clown

2023-10-09T16:58:52.000Z

Then just do the same in app router. It will work. Make the layout a client component

Southeastern blueberry beeOP

2023-10-09T16:58:58.000Z

Clown

2023-10-09T16:59:14.000Z

And no the children wont be client components too

Southeastern blueberry beeOP

2023-10-09T16:59:21.000Z

nono i know

just that i need to do server logic in that layout

Clown

2023-10-09T16:59:37.000Z

Like?

Southeastern blueberry beeOP

2023-10-09T17:00:11.000Z

fetching the user and pre populating a context, and in case invalidate the first token

anyway, it's not worth to go that route, i'll just access dom at this point

Clown

2023-10-09T17:00:49.000Z

Move those to server actions or route handlers then

Its fine to use route handlers with client component

Also any specific reason to not use next-theme?

@Clown Also any specific reason to not use next-theme?

Southeastern blueberry beeOP

2023-10-09T17:03:45.000Z

i have my own logic that creates layered colors from some basic theme colors, manages fonts, some other utilities and css variables

Clown

2023-10-09T17:07:14.000Z

Welp, i dont think next natively provides what you want. You'll just have to go with the app router equivalent of this or something.

@Clown Welp, i dont think next natively provides what you want. You'll just have to go with the app router equivalent of this or something.

Southeastern blueberry beeOP

2023-10-09T17:08:06.000Z

yeah that's what i was searching but it doesn't seem to be possible, except the way u mentioned might work by chainging the layout to be a client component but i'm not even sure if that works

Answer

Southeastern blueberry beeOP

2023-10-09T17:08:16.000Z

i'll just access the dom, it's fine

i dont think i'm gonna need to do manual head edits anymore except this

@Southeastern blueberry bee yeah that's what i was searching but it doesn't seem to be possible, except the way u mentioned might work by chainging the layout to be a client component but i'm not even sure if that works

Clown

2023-10-09T17:09:32.000Z

I mean if you are worried about refactoring the code, just create a client component with whatever meta tag and react magic you want, then wrap your layout with it.