无法在Next.JS中分解“undefined”或“null”的属性“html”_Next.js_Server Side Rendering

无法在Next.JS中分解“undefined”或“null”的属性“html”

next.js

无法在Next.JS中分解“undefined”或“null”的属性“html”,next.js,server-side-rendering,Next.js,Server Side Rendering,我已根据以下示例添加了材质UI 下面是我的代码 import React from 'react'; import Document, {Head, Html, Main, NextScript} from "next/document"; import {ServerStyleSheets} from '@material-ui/core/styles'; import theme from "../theme"; export default cla

我已根据以下示例添加了材质UI

下面是我的代码

import React from 'react';
import Document, {Head, Html, Main, NextScript} from "next/document";
import {ServerStyleSheets} from '@material-ui/core/styles';
import theme from "../theme";

export default class MyDocument extends Document {
render() {
    return (
        <Html lang={"en"}>
            <Head>
                <meta name={"theme-color"} content={theme.palette.primary.main}/>
                <link rel={"stylesheet"}
                      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
                />
            </Head>
            <body>
            <Main/>
            <NextScript/>
            </body>
        </Html>
    );
}
}

MyDocument.getInitialProps = async (ctx) => {
const sheets = new ServerStyleSheets();
const originalRenderPage = ctx.renderPage;

ctx.renderPage = () => {
    originalRenderPage({
        enhanceApp: (App) => (props) => sheets.collect(<App {...props}/>)
    });
};
const initialProps = await Document.getInitialProps(ctx);

return {
    ...initialProps,
    styles: [...React.Children.toArray(initialProps.styles), sheets.getStyleElement()]
};
};

有什么想法吗？

发现了问题。我已经用{}将原始渲染页面包装好了

ctx.renderPage = () => originalRenderPage({
        enhanceApp: (App) => (props) => sheets.collect(<App {...props}/>)
});

发现了问题。我已经用{}将原始渲染页面包装好了

ctx.renderPage = () => originalRenderPage({
        enhanceApp: (App) => (props) => sheets.collect(<App {...props}/>)
});

像这样从Head单独导入Head

import Head from 'next/head'

像这样从Head单独导入Head

import Head from 'next/head'