Next.js渲染问题

Question

我在Next.js中构建了Next.js，通过Netlify静态部署。每当我将它加载到一个新的选项卡中时，我就会得到一个白色的闪存，在其他内容加载之前，SVG标识是可见的，但没有其他任何东西。我不认为这是一个闪存的非样式的内容，但它有一个类似的效果。我正在体验桌面Chrome、Safari和Firefox，但在移动平台上没有看到这种情况。我已经找了好几个小时的麻烦了，根本解决不了问题。这是回购如果有人想看的话。任何见解都会受到极大的赞赏。

Answer 1

直接引用样式-组件的文档

基本上，您需要添加一个自定义页面/_document.js(如果没有)。然后将样式化组件的逻辑复制到呈现样式的服务器端。 有关最新的使用示例，请参阅Next.js回购中的示例。

当将styled-components与Next.js结合使用时，您需要在_document.js中做一些小魔术。在with-styled-components的存储库中有一个Next.js示例。请看这里：document.js