在下一个 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>
</>
)
}
我猜你正在使用
appHeadgenerateMetadataimport 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 参考和静态元数据方法。