javascript - 无法使用 Next JS 进行服务器端渲染 Styled-Components
问题描述
我试图通过代码和调试来解决我的问题,但是我无法找出原因,所以我发布了一个问题,并附上了_document.js和_app.js和babel的内容。
此外在 Chrome 中应用了禁用 Javasrcipt。
如果您有更多信息,请告诉我。
任何帮助,将不胜感激。
截屏
网络
调试器
通天塔
{
"presets": ["next/babel"],
"plugins": [
[
"babel-plugin-styled-components",
{
"fileName": true,
"displayName": true,
"pure": true,
"ssr": true,
"preprocess": false
}
]
]
}
_document.js
import React from 'react';
import Document, { Html, Head, Main, NextScript } from "next/document"
import { ServerStyleSheet } from 'styled-components';
export default class MyDocument extends Document {
static async getInitialProps(ctx) {
const sheet = new ServerStyleSheet();
const originalRenderPage = ctx.renderPage;
try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) =>
sheet.collectStyles(<App {...props} />),
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: (
<>
{initialProps.styles}
{sheet.getStyleElement()}
</>
),
};
} catch (error) {
console.error(error);
} finally {
sheet.seal();
}
}
render() {
return (
<Html>
<Head />
<body>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default%2Ces2015%2Ces2016%2Ces2017%2Ces2018%2Ces2019"></script>
<Main />
<NextScript />
</body>
</Html>
);
}
}
_app.js
import React from 'react';
import Prototype from 'prop-types';
import Head from 'next/head';
import 'antd/dist/antd.css';
import wrapper from '../store/configureStore';
const App = ({ Component }) => {
return (
<>
<Head>
<meta charSet='utf-8'></meta>
<title>NodeBird</title>
</Head>
<Component />
</>
);
}
App.Prototype = {
Component: Prototype.elementType.isRequired,
}
export default wrapper.withRedux(App);
解决方案
安装
npm i babel-plugin-styled-components --save-dev
.babelrc
{
"presets": [
"next/babel"
],
"plugins": [
[
"styled-components",
{
"ssr": true,
"displayName": true,
"preprocess": false
}
]
]
}
推荐阅读
- javascript - JavaScript .onchange 一直闪烁
- reactjs - 404 错误:无法使用 django rest 框架提供静态反应构建,除非我去 /index.html
- reactjs - 如何使实用程序功能可用于所有组件
- pyarrow - 使用类似于 pandas 阅读器功能的 pyarrow 读取大型压缩 json 文件
- angular - Angular 9 Ivy 已禁用,但未定义文档中的错误
- python - 减少 matplotlib 中 log-log 子图的 bin 数量
- serenity-platform - 宁静平台;LocalText.Get("Db.something") 使用特定语言而不是所选语言?
- assembly - 使用 CPUID 指令了解 C 的编译器 mov [mem]、reg 指令
- reactjs - undefined 不是 react-native 中的对象(评估'context._context')
- css - 在不使用 flex-col 的情况下对齐 2 个元素