我在 Next.js 中构建了我的网站，通过 Netlify 静态部署。每当我将其加载到新选项卡中时，在其余内容加载之前，我都会看到一个白色的 Flash，其中 SVG 徽标可见但没有其他内容。我不认为这是一个 Flash Of Unstyled Content，但它有一个类似的影响。我在桌面 Chrome、Safari 和 Firefox 上体验过，但在移动设备上看不到。我已经解决了几个小时的问题，而且离解决问题还很远。如果有人想看看，这里是回购。任何见解都非常感谢。
1 回答
2
基本上你需要添加一个自定义 pages/_document.js （如果你没有的话）。然后复制 styled-components 的逻辑，将服务器端渲染的样式注入 .
请参阅 Next.js 存储库中的示例以获取最新的使用示例。
styled-components与 Next.js 一起使用时，您需要在_document.js. Next.js 的存储库中有一个with-styled-components示例。请看这里：https ://github.com/vercel/next.js/blob/canary/examples/with-styled-components/pages/_document.js
于 2020-11-06T07:47:25.727 回答