NextJS 中可以有多个附加的“HEAD”元素吗？

Question

NextJS 中可以有多个附加的“HEAD”元素吗？

我希望能够有一个“主”HEAD元素，_document.js并且对于某些页面，有一个附加HEAD元素可以添加到“主”中的内容。从https://nextjs.org/docs/api-reference/next/head看来，这是可能的。

但是，在 Stack Overflow 中搜索答案时，我发现了这个帖子，这似乎表明这可能会导致意想不到的结果。

如果我不能有多个HEAD元素，我是否需要从单个页面传递数据getInitialProps？

Answer 1

ElD*_*n90 5

next/head当您需要对它做一些事情时，您可以简单地导入到任何页面/组件中

例子：

import Head from 'next/head'

function IndexPage() {
  return (
    <div>
      <Head>
        <title>My page title</title>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      </Head>
      <p>Hello world!</p>
    </div>
  )
}

export default IndexPage

Run Code Online (Sandbox Code Playgroud)

并且还有一个默认的 Head _document.js

import Document, { Head, Main, NextScript } from 'next/document';

export default class MyDocument extends Document {
  render() {
    return (
      <html lang="en">
        <Head>
          <link rel="shortcut icon" href="/favicon.ico" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    );
  }
}

Run Code Online (Sandbox Code Playgroud)

到目前为止，我没有遇到任何问题。

不过有一点要记住：

卸载组件时 head 的内容会被清除，因此请确保每个页面都完全定义了 head 中所需的内容，而不要对其他页面添加的内容进行假设。

归档时间：	5 年，9 月前
查看次数：	715 次
最近记录：	5 年，9 月前