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>
</>
)
}
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.titledid you get the real value ? – Mohamed Akrem Chabchoub Commented May 15, 2023 at 15:47 - @dom1 yes it prompts – Mohammed Bekele Commented May 15, 2023 at 16:03
1 Answer
Reset to default 7I am guessing you are using the app directory, the Head ponent 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.