meta - 如何在 nextJS 中使用 <Head>

我在将移动元标记放入 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

感谢帮助!

最佳答案

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

一方面，两个<Head>设置在不同组件中的标签有时会以非常奇怪的方式相互干扰。另一方面，有时将它放在页面组件中有效，有时却无效。而且这些规则似乎完全是随机的。

唯一对我有用的是使用 <Head>在 _document.js . :/

关于meta - 如何在 nextJS 中使用 <Head>，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54856503/