Next.js Discord

Discord Forum

Page metadata with multiple client component

Answered
Spectacled bear posted this in #help-forum
Open in Discord
Spectacled bearOP
Hi, I've multiple client components, i want to have different metadata for each page component. Is there a way to have different client side metadata without having a separate metadata or turning my client components to server components.
Answered by joulev
you can simply add the meta tags inside those client components.

"use client"

function AnyClientComponent() {
  const [title, setTitle] = useState("");
  return (
    <div>
      <Input value={title} onValueChange={setTitle} />
      <title>{title}</title>
    </div>
  );
}
View full answer

4 Replies

@Spectacled bear Hi, I've multiple client components, i want to have different metadata for each page component. Is there a way to have different client side metadata without having a separate metadata or turning my client components to server components.
joulev
you can simply add the meta tags inside those client components.

"use client"

function AnyClientComponent() {
  const [title, setTitle] = useState("");
  return (
    <div>
      <Input value={title} onValueChange={setTitle} />
      <title>{title}</title>
    </div>
  );
}
Answer
Any idea why the second one works but not the first one?

<title>{isLogin ? 'Log in' : 'Sign up'} - MyApp</title>
<title>{isLogin ? 'Log in - MyApp' : 'Sign up - MyApp'}</title>