在我的NextJS应用程序的生产版本(npm run build && npm run start(上，我注意到元素在页面加载时触发了css过渡(链接闪烁蓝色，svg闪烁颜色(。
仅在Chrome中注意到，Firefox和Safari没有这个问题。
在这个堆栈溢出问题中找到了答案。看来这是由于铬错误(https://crbug.com/332189 和 https://crbug.com/167083(。
解决方法是在正文末尾放置一个带有一个空格的脚本标记。在 NextJS 中，您可以通过添加pages/_document.js文件(更多信息(来执行此操作。
我的现在看起来像这样：
import Document, { Html, Head, Main, NextScript } from 'next/document';
export default class MyDocument extends Document {
render () {
return (
<Html lang="en">
<Head>
<meta charSet="utf-8" />
<meta name="viewport" content="initial-scale=1.0, width=device-width"/>
</Head>
<body>
<Main />
<NextScript />
{/* Empty script tag as chrome bug fix, see https://stackoverflow.com/a/42969608/943337 */}
<script> </script>
</body>
</Html>
)
}
}
编辑：此错误可能会在 2021 年 6 月 1 日起在 Chrome Canary v93.0.4529.0 中修复 7.5 年！