San*_*ana 3 server-side-rendering next.js
我根据以下示例添加了材质 UI。
https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_document.js
以下是我的代码。
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()]
};
};
尝试加载 localhost:3000 时出现以下错误
wait - compiling...
event - compiled successfully
TypeError: Cannot destructure property `html` of 'undefined' or 'null'.
at Function.getInitialProps (C:\Work\funny\web\.next\server\pages\_document.js:299:9)
at process._tickCallback (internal/process/next_tick.js:68:7)
event - build page: /next/dist/pages/_error
任何想法？
gha*_*eri 14
像这样从 head 独立导入 Head
import Head from 'next/head'
发现问题了。我用 { } 包裹了originalRenderPage
ctx.renderPage = () => originalRenderPage({
enhanceApp: (App) => (props) => sheets.collect(<App {...props}/>)
});
| 归档时间： |
|
| 查看次数： |
8127 次 |
| 最近记录： |