Next.js 渲染问题
Next.js rendering issue
我建了 my website in Next.js, deployed statically via Netlify. Whenever I load it in a new tab, I get a white flash where the SVG logos are visible but nothing else, before the rest of the content loads in. I don't think this is a Flash Of Unstyled Content but it has a similar effect. I'm experiencing on desktop Chrome, Safari and Firefox, but doesn't seen to be happening on mobile. I've been trouble shooting for hours and am no closer to solving. Here's the repo 如果有人想看的话。非常感谢任何见解。
直接引用自styled-components' docs：
Basically you need to add a custom pages/_document.js (if you don't
have one). Then copy the logic for styled-components to inject the
server side rendered styles into the .
Refer to our example in the Next.js repo for an up-to-date usage
example.
将 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
我建了 my website in Next.js, deployed statically via Netlify. Whenever I load it in a new tab, I get a white flash where the SVG logos are visible but nothing else, before the rest of the content loads in. I don't think this is a Flash Of Unstyled Content but it has a similar effect. I'm experiencing on desktop Chrome, Safari and Firefox, but doesn't seen to be happening on mobile. I've been trouble shooting for hours and am no closer to solving. Here's the repo 如果有人想看的话。非常感谢任何见解。
直接引用自styled-components' docs：
Basically you need to add a custom pages/_document.js (if you don't have one). Then copy the logic for styled-components to inject the server side rendered styles into the .
Refer to our example in the Next.js repo for an up-to-date usage example.
将 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