我正在使用next.js，当我使用npm run dev的应用程序时，一切似乎都很好。但是，当我用命令npm run build将我的next.js应用程序导出到静态文件，并试图打开我的项目的一部分，屏幕是unstyled，这导致非常糟糕的用户体验。我知道这被称为FOUC，但如何避免它的next.js静态导出？注：我正在使用样式组件库，不确定是否会影响最终结果。
npm run dev
npm run build
uqjltbpv1#
如果您使用的是styled-components，我会考虑按照以下说明修改您的**_document.js**文件：https://styled-components.com/docs/advanced#server-side-rendering这就是我如何设法摆脱FOUC后，尝试了一堆随机的东西，如：
<script>0</script>
3npbholx2#
希望这对其他人来说是一个修复，但是当我错误地将整个页面内容 Package 在head标记中时，我看到了这个行为。所以不要像我一样用类似这样的东西覆盖Document，确保尽快关闭head标记：
<Html lang="en"> <Head> <body> <Main /> <NextScript /> </body> </Head> </Html>
juzqafwq3#
对于任何使用styled-component遇到这个恼人问题的人，我通过参考这个和this在页面加载之前在服务器端呈现样式来解决这个问题。
styled-component
import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document'; import { ServerStyleSheet } from 'styled-components'; export default class MyDocument extends Document { static async getInitialProps(ctx: DocumentContext) { const sheet = new ServerStyleSheet(); const originalRenderPage = ctx.renderPage; try { ctx.renderPage = () => originalRenderPage({ enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />), }); const initialProps = await Document.getInitialProps(ctx); return { ...initialProps, styles: [initialProps.styles, sheet.getStyleElement()], }; } finally { sheet.seal(); } } render() { return ( <Html lang="en"> <Head /> <body> <Main /> <NextScript /> </body> </Html> ); } }
3条答案
按热度按时间uqjltbpv1#
如果您使用的是styled-components，我会考虑按照以下说明修改您的**_document.js**文件：https://styled-components.com/docs/advanced#server-side-rendering
这就是我如何设法摆脱FOUC后，尝试了一堆随机的东西，如：
<script>0</script>**标记3npbholx2#
希望这对其他人来说是一个修复，但是当我错误地将整个页面内容 Package 在head标记中时，我看到了这个行为。
所以不要像我一样用类似这样的东西覆盖Document，确保尽快关闭head标记：
juzqafwq3#
对于任何使用
styled-component遇到这个恼人问题的人，我通过参考这个和this在页面加载之前在服务器端呈现样式来解决这个问题。