Moh*_*ele 5 javascript meta-tags reactjs next.js vercel
在 next js 13 之前，我们曾经使用动态头作为导入。但在 Next JS 13 中，他们引入了 head.js 类。这在使用静态页面时有效，但是在加载动态页面时我们如何更改头部的标题和描述？我直接导入了next/head然后分配数据但没有改变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>
</>
)
}
我猜你正在使用该app目录，该Head组件已被generateMetadataAPI 替换。用法可以在页面中使用类似的内容：
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
};
}
您可以在官方文档中找到完整的 API 参考和静态元数据的方法。
| 归档时间： |
|
| 查看次数： |
4696 次 |
| 最近记录： |