Next.js 渲染问题

Question

我在 Next.js 中构建了 my website，通过 Netlify 静态部署。每当我将其加载到新选项卡中时，在其余内容加载之前，我都会看到一个白色的 Flash，其中 SVG 徽标可见但没有其他内容。我不认为这是一个 Flash Of Unstyled Content，但它有一个类似的影响。我在桌面 Chrome、Safari 和 Firefox 上体验过，但在移动设备上看不到。我已经解决了几个小时的问题，而且离解决问题还很远。 Here's the repo 如果有人想看看。任何见解都非常感谢。

Answer 1

直接引用styled-components' docs:

基本上你需要添加一个自定义页面/_document.js（如果你不 有一个）。然后复制样式组件的逻辑以注入 服务器端渲染样式到 .

请参阅 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