Next js 的元标记问题答案

【问题标题】：Problems with meta tags with Next jsNext js 的元标记问题
【发布时间】：2021-08-07 11:06:38
【问题描述】：

我是Next js的新手，并尝试在我的项目中编写一些动态开放图元标记关于社交媒体。问题是，我可以在我的检查器中看到所有元标记，但是当我试图在我的源代码或 facebook 共享调试器中找到它们时，我只能看到一些元标记，它们与开放图无关那些。

我在源代码或共享调试器中看到的元标记：

<head>
       <meta charSet="utf-8"/>
       <meta name="viewport" content="width=device-width"/>
       <meta name="next-head-count" content="2"/>
</head>

我使用 next/head 创建了一个自定义 Head，我已将此自定义 head 定位在布局中，而不是 _app.js 文件中（但我尝试添加它在那里，没有好的结果）。我没有 getServerSideProps 函数，也不知道在我的代码中哪里实现这个函数。知道可以是什么吗？

【问题讨论】：

标签： next.js meta-tags social-media

【解决方案1】：

我没有getServerSideProps函数，也不知道在我的代码哪里实现这个函数。

getServerSideProps只能定义在页面组件上（pages目录下）。

https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering

有一个问题，如何检索元标签的动态值？如果您在客户端使用useEffect 获取它们，则元标记的值在初始呈现时未定义。

如果您需要从外部数据源获取值，您应该在getStaticProps 或getServerSideProps 中获取它们并将它们传递给页面道具。

【讨论】：

我没有在自定义 head 的组件中使用 useEffect，我从我的布局中作为道具传递，我从 redux 状态获取信息