Meta 如何使用<；头>；与nextJS_Meta_Next.js_Html Head

Meta 如何使用<；头>；与nextJS

next.js

Meta 如何使用<；头>；与nextJS,meta,next.js,html-head,Meta,Next.js,Html Head,我在将移动元标记导入nextJS应用程序时遇到问题。根据这里的文件，这应该是可行的但我没有看到标题或我自己的任何元属性被渲染。我所看到的是： <!DOCTYPE html><html><head><meta charSet="utf-8" class="next-head"/> 这看起来像某种默认类型 import Link from 'next/link' import Head from 'next/head' import He

我在将移动元标记导入nextJS应用程序时遇到问题。根据这里的文件，这应该是可行的

但我没有看到标题或我自己的任何元属性被渲染。我所看到的是：

<!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

从“下一个/链接”导入链接
从“下一个/头”导入头
从“../components/Header”导入标题
从“../components/BaseLayout.js”导入BaseLayout
常数索引=（）=>(
HSK应用程序
HSK测验应用程序！
)
导出默认索引

谢谢你的帮助

NextJS的

组件似乎有点问题

首先，在不同组件中设置的两个

标记有时会以非常奇怪的方式相互干扰。另一方面，有时在页面组件中使用它是可行的，有时则不然。规则似乎完全是随机的

唯一对我一直有效的方法是在

\u document.js

中使用

：/

我无法重现这个问题。这个问题写出来后，可能有一个bug被修复了，但作者确实指出，它们使用

键

属性来帮助Next.js跟踪元标记，并在它们出现在父元素和子元素中时消除重复项

为避免

头部重复标记

，您可以使用

键

属性，这将确保标记只渲染一次，如以下示例：

从“下一个/头部”导入头部
函数IndexPage（）{
返回(
我的页面标题
你好，世界
)
}
导出默认索引扩展

您是如何处理这种情况的？你找到解决办法了吗？@AmritShrestha抱歉，我记不起来了，但最后我让它工作了。。。这是afair的一些配置故障。很抱歉请注意，不再支持在

\u document.js

中使用

。有一个明确的警告可以避免它，如果需要设置全局标记，您应该在

\u app.js

中使用它。可以使用

key='xyz'

属性。这将强制在标题中只添加一次给定的标记。

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