Next.js Discord

Discord Forum

Meta data title doesn't work on client side

Unanswered
Reddish carpenter ant posted this in #help-forum
Open in Discord
Reddish carpenter antOP
Hi there!

So I'm trying to change meta data title, but it does not change.

'use client'

import Head from 'next/head';
import { useParams } from "next/navigation"

import { Markup } from 'react-render-markup';
import DOMPurify from 'dompurify';

import { useQuery } from "@tanstack/react-query"
import { getArticleBySlug } from "@/services/apis/requests/blog"

import Avatar from '@/components/atoms/Avatar';
import FloatingShareButtons from '../_components/FloatingShareButtons'

function readingTime(words: number) {
  const wpm = 225;
  const time = Math.ceil(words / wpm)
  return time;
}

function BlogView() {
  const { slug } = useParams()

  const dataQuery = useQuery({
    queryKey: [`blog/${slug}`, slug],
    queryFn: () => getArticleBySlug(String(slug))
  })


  if (dataQuery.isLoading) return <div>Skeleton</div>

  function addBlogJsonLd() {
    return {
      __html: dataQuery?.data?.SchemaData
    }
  }

  const data = dataQuery?.data?.NewsArticle
  const shareUrl = "https://www.google.com"

  return (
    <>
      {/* <Head>
        <title>Woo {data?.title}</title>
        <meta
          name="description"
          // content="Super product with free shipping."
          key="desc"
        />
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={addBlogJsonLd()}
        />
      </Head> */}
      <Head>
        <title>@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@</title>
        <meta
          name="description"
          content="Contenttttt"
        />
      </Head>
      <article className="">


And I'm really confused on to why. It works in my other app...

This file is also located in app/blog/[slug]/page.tsx

11 Replies

American Crow
https://nextjs-faq.com/metadata-client-components
@American Crow https://nextjs-faq.com/metadata-client-components
Reddish carpenter antOP
Isn't that what I'm already doing though?
I removed Head
and I guess the title worked
hmmm i suppose my other project was SSR actually
and this one isn't
how would you add JsonLd(SchemaData) in that case
American Crow
  <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify(JSONLD_SoftwareApplication),
        }}
      />
Reddish carpenter antOP
Oh, I was doing it a bit wrong.

I wonder, if that's how you do it, how do you manage all pages that need a title or such?

 <title>@@@@@@mmm@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@</title>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify(dataQuery?.data?.SchemaData),
        }}
      />
      <meta
        name="description"
        content="Contenttttt"
      />

This is wha I got for my article page, what about other pages?

Do you create a component for this or? If you were to have say {page name} - domain.com format, it would be unwise to have that hardcoded in every page right.

Is there some conventin to go about this?
American Crow
I am doing it server side so don't face all those problems:
export async function generateMetadata({
  params,
}: PageProps): Promise<Metadata> {
  const page = await getPageFromParams(params)
  if (!page) {
    return {}
  }
  page.slug = page.slug ?? ""

  // slug is e.g. namegenerators/en/dnd/a-c/aasimar
  // delete first segement use the rest
  const pageUrl = page.slug.split("/").slice(1).join("/")

  return {
    title: page.metaTitle,
    description: page.metaDescription,
    openGraph: {
      title: page.metaTitle,
      description: page.metaDescription,
      type: "article",
      url: absoluteUrl(pageUrl),
      images: [
        {
          url: siteConfig.ogImage,
          width: 1200,
          height: 630,
          alt: page.metaTitle,
        },
      ],
    },
    twitter: {
      card: "summary_large_image",
      title: page.metaTitle,
      description: page.metaDescription,
      images: [siteConfig.ogImage],
    },
  }
}