无法使用 Next JS 进行服务器端渲染 Styled-Components

Question

我尝试通过代码和调试来解决我的问题，但是我找不到原因，所以我发布了一个问题，并附上了_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);

Answer 1

安装

npm i babel-plugin-styled-components --save-dev

.babelrc

{
  "presets": [
    "next/babel"
  ],
  "plugins": [
   [
     "styled-components",
     {
        "ssr": true,
        "displayName": true,
        "preprocess": false
      }
   ]
  ]
}