Question

我正在使用下一个5，在我的项目中，我有一个_document文件，如下所示：

import React from 'react'
import Document, { Head, Main, NextScript } from 'next/document'
import { extractCritical } from 'emotion-server'

export default class MyDocument extends Document {
  static getInitialProps({ renderPage }) {
    const page = renderPage()
    const styles = extractCritical(page.html)
    return { ...page, ...styles }
  }

  constructor(props) {
    super(props)
    const { __NEXT_DATA__, ids } = props
    if (ids) {
      debugger
      __NEXT_DATA__.emotion_ids = ids
    }
  }

  render() {
    return (
      <html>
        <Head>
          <title>My Site</title>
          <meta charSet="utf-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          <meta property="og:locale:alternate" content="fr_FR" />
          <meta property="og:site_name" content="My Site" />
          <meta name="twitter:site" content="@my_site" />
          <meta name="twitter:creator" content="@my_site" />
          <style dangerouslySetInnerHTML={{ __html: this.props.css }} />
        </Head>
        <body>
          <Main />
          <div id="modal" style={{ display: 'none' }} />
          <NextScript />
        </body>
      </html>
    )
  }
}

还有一个页面使用了Next的<Head>组件。

当我检查渲染的页面时，我可以在__document中看到那些标签（来自<Head>和<body>），而在我的<head>标签中看不到。关于可能发生什么的任何线索？

Answer 1

对于路由页面（不是_document本身），请尝试import Head from "next/head";。

这就是我在Next.js 7和8中所做的，我怀疑导入与版本5相同。

Answer 2

您必须从Html导入next/document组件

人体头部渲染

2 个答案: