next.js 标题标签未出现在视图源中：下一个：js

0g0grzrc 于 2022-11-23 发布在其他

关注(0)|答案(6)|浏览(111)

我已经创建了我的下一个js应用程序，我已经实现了我的head标签，但当我检查查看源代码的右键单击，我没有看到我的标题和 meta标签，我怎么能实现呢？
即使view souce中缺少头标记，也可以在inspect element中找到它

<Head>
                <title> {itm.Name} - wixten </title>
                <link rel="shortcut icon" href="/wixten.png" />
                <meta
                  name="viewport"
                  content="initial-scale=1.0, width=device-width"
                />
                <meta name="description" content={itm.Summary} />
                <meta charSet="utf-8" />
                <meta property="og:title" content={itm.Name} />
                <meta property="og:description" content={itm.Summary} />
                <meta property="og:image" content="images/wixten.png" />
                <meta property="og:locale" key="og:locale" content="en_US" />
                <meta property="og:type" key="og:type" content="website" />
                <meta
                  property="og:url"
                  key="og:url"
                  content={`${baseurl}${itm._id}`}
                />
              </Head>

我正在codesandbox中添加完整代码
https://codesandbox.io/s/sweet-franklin-gpht9?file=/pages/index.js
我的网站面临的问题是这个
https://wixten.com/query/61f4f5f9e41f700023c833c0

next.js

来源：https://stackoverflow.com/questions/70924845/head-tag-not-appearing-in-view-source-nextjs

6条答案

按热度按时间

kulphzqa1#

您的title和 meta标签不会出现在源代码中，因为您是在页面加载后从客户端获取它们的。
为了将它们包含在源代码中，需要通过服务器端渲染（SSR）或静态站点生成（SSG）提前获取它们。
假设您想走SSR路线，您需要执行以下操作：

export async function getStaticProps(context) {
    const res = await axios.get(...);

    return {
        // will be passed to the page component as props
        props: {
            Item: res.data
        }, 
    }
}

然后，您可以在元件中使用它，如下所示：

function MyPageComponent({ Item }) {
    return (
        <Head>
            <title>{Item.name}</title>
        </Head>
    )
}

赞(0）回复(0）举报 2022-11-23

kognpnkq2#

如果有人遇到类似的问题，请检查your _document.jsx是否符合SSR要求。如果没有设置，则 meta标记不会显示。
您还需要在其中包含您的 meta标签。

赞(0）回复(0）举报 2022-11-23

xpcnnkqh3#

你必须在返回时调用你的头，否则它不会出现在客户端

赞(0）回复(0）举报 2022-11-23

evrscar24#

您可以使用Next.js Head设置标题

import Head from "next/head";
const Home = () => {
  return (
    <div>
      <Head>
        <title>your title</title>
      </Head>
     // code
    </div>
  );
};

赞(0）回复(0）举报 2022-11-23

htzpubme5#

我遇到了同样的问题，重新启动一个新的标签与localhost：3000解决了这个问题在我的情况。

赞(0）回复(0）举报 2022-11-23

vltsax256#

我没有看到这里提到这一点，还有一些关于SO的其他问题，也未能解决我所需要的解决方案（许多参考从正确的地方导入Head，等等）。
我所要做的就是将fallback从getStaticPaths中的true更改为"blocking"。立即解决。

赞(0）回复(0）举报 2022-11-23