Question

我在将移动元标记添加到nextJS应用程序时遇到问题。根据这里的文档，这应该工作 https://nextjs.org/docs#populating-head

但是我看不到标题或我自己的任何meta属性都被渲染。我所看到的是：

Set Ranking=2 where ID=17

看起来像是默认类型。

<!DOCTYPE html><html><head><meta charSet="utf-8" class="next-head"/>

帮助表示感谢！

Answer 1

NextJS的<Head>组件似乎有点问题。

一方面，设置在不同组件中的两个<Head>标签有时会以非常奇怪的方式相互干扰。另一个原因是，有时将其包含在页面组件中是可行的，有时却不可行。规则似乎完全是随机的。

唯一对我有效的方法是在<Head>中使用_document.js。：/

Answer 2

我无法重现此问题。自编写此问题以来，也许已修复了一个错误，但是documentation确实指出它们使用了key属性来帮助Next.js跟踪元标记并消除它们在父代和子代中出现时的重复项元素。

要避免在head中使用重复的标签，可以使用key属性，这样可以确保标记仅呈现一次，如以下示例：

import Head from 'next/head'

function IndexPage() {
  return (
    <div>
      <Head>
        <title>My page title</title>
        <meta property="og:title" content="My page title" key="title" />
      </Head>
      <Head>
        <meta property="og:title" content="My new title" key="title" />
      </Head>
      <p>Hello world!</p>
    </div>
  )
}

export default IndexPage

如何与nextJS一起使用

2 个答案: