How to use dynamic head in Next js 13?

Question

before next js 13 we used to do dynamic head as an import. but in Next JS 13 they introduced the head.js class. this works when using a static page, but when loading a dynamic how can we change the title and desc in the head? i directly imported the next/head and then assign the data but it didn't change the head.

export default function DetailPage({ params: { itemid } }) {

const [datas, setDatas] = useState({});

  const getData = async () => {
    const docRef = doc(db, "items", itemid);
    const docSnap = await getDoc(docRef);
    setDatas(docSnap.data());
  };

  useEffect(() => {
    if (Object.keys(datas).length == 0) {
      getData();
    }
  }, [datas]);

return (

<>
<Head>
        <title>{datas.title}</title>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
        <meta
          name="keywords"
          content="some contents"
        />
        <meta
          name="description"
          content={datas.desc}
        />
      </Head>

  <section>...</section>

</>

)

}

When you print `datas.title` did you get the real value ? – dom1 May 15 '23 at 15:47 — dom1, May 15 '23 at 15:47
@dom1 yes it prompts – Mohammed Bekele May 15 '23 at 16:03 — Mohammed Bekele, May 15 '23 at 16:03

score 4 · Accepted Answer · answered May 15 '23 at 19:58

4

I am guessing you are using the app directory, the Head component has been replaced by the generateMetadata API. Usage could use something like this inside your page:

import type { Metadata } from "next";

export function MyPage(): Promise<JSX.Element> {
  return <></>;
}

export async function generateMetadata(): Promise<Metadata> {
  const data = await getMyData();
  return {
    // return your metadata here
  };
}

You can find a full API reference and a method for static metadata inside the official docs.

answered May 15 '23 at 19:58

Fabio Nettis

1,150
6
18

1

thats not working either. i've tried statically and dynamically but nothing – Mohammed Bekele May 16 '23 at 08:13
I'm using firebase and i'm storing the fetched value inside useState. but the metadata only works in server side – Mohammed Bekele May 16 '23 at 10:00
1

it was my version, after upgrading it to the latest version it works – Mohammed Bekele May 16 '23 at 11:10
... so now you have to make the same request twice if you wanted that data in your page? -1 – Krusty the Clown Jun 24 '23 at 01:28
In code yes. But fetch requests are automatically deduped and reused. Or using Reacts new `cache` funtion will also dedupe not fetch based calls. Also, pretty rude to downvote a valid answer based on the lack of one ones knowledge. – Fabio Nettis Jun 24 '23 at 17:14
Poorly doucmented and not expressive enough. Next.js. – Marek Maurizio Aug 11 '23 at 07:20
@MarekMaurizio I am not affiliated with Next.js, so sadly nothing I can do about that. But I actually am quite fond of the documentation. – Fabio Nettis Aug 11 '23 at 09:06

How to use dynamic head in Next js 13?

1 Answers1