如何在nextJS中使用<Head>？

Question

如何在nextJS中使用<Head>？

4

我有问题将移动端的meta标签添加到NextJS应用程序中。根据这里的文档，应该可以使用以下方式实现：https://nextjs.org/docs#populating-head。但我没有看到标题或任何我自己的元属性得到呈现。我只看到：

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

这看起来像某种默认设置。

import Link from 'next/link'
import Head from 'next/head'
import Header from '../components/Header'
import BaseLayout from '../components/BaseLayout.js'

const Index = () => (
  <BaseLayout>
    <Head>
      <title>HSK App</title>
      <meta name="viewport" content="initial-scale=1.0, width=device-width" />
    </Head>
    <Link href='/quizList'>
      <h3>HSK Quiz App!</h3>
    </Link>
  </BaseLayout>
)
export default Index

需要帮助！

- dcsan

2个回答

0

我无法重现这个问题。也许自从这个问题被提出以来，已经修复了一个错误，但是文档确实指出他们使用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

- FlippingBinary

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Lucia · Accepted Answer

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

首先，不同组件中设置的两个<Head>标签有时会以非常奇怪的方式相互干扰。其次，有时将其放在页面组件中有效，有时则无效。规则似乎完全是随机的。

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