带有NextJS 12的样式化组件在服务器端不工作(缺少css第一次渲染)

Question

随着最近发布的NextJS 12，样式化组件现在得到支持，而不需要在NextJS之上添加任何插件。

但我似乎无法让它与服务器端rendring一起工作。

为了启用它，我安装了样式组件包，并在配置文件中添加了以下内容。

module.exports = {
compiler: {
reactStrictMode: true,
styledComponents: true,
},
};

样式正在客户端上工作，但第一次渲染缺少css样式。如果我查看源页面，就看不到添加了任何css样式。

Answer 1

我确实遇到了这个问题，但不得不切换到另一个项目。也许在你的配置中试试这个

/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
compiler: {
styledComponents: true,
},
}
module.exports = nextConfig

来源：https://styled-components.com/docs/advanced#with-swc

Answer 2

我建议在nextjs中使用NoSSR。

因此，您可以使用以下内容。

import dynamic from "next/dynamic";
...
const SidebarWithNoSSR = dynamic(() => import("./Sidebar"), { ssr: false });
...