在 Next.js 项目中,我希望获得一些初始 HTML,其中的内容完全相同<head>:
<link href="..." rel="stylesheet" media="print" onload="this.media='all'" />
Run Code Online (Sandbox Code Playgroud)
我在 Next.js<Head>组件内的代码中包含以下内容:
{ /* @ts-ignore */ }
<link href="..." rel="stylesheet" media="print" onload="this.media='all'" />
Run Code Online (Sandbox Code Playgroud)
如果没有@ts-ignore它,它会说:
类型“DetailedHTMLProps<LinkHTMLAttributes, HTMLLinkElement>”上不存在属性“onload”。您指的是“onLoad”吗?TS(2322)
如果我使用onLoad而不是onload我得到:
类型“string”不可分配给类型“(event: SyntheticEvent<HTMLLinkElement, Event>) => void”。TS(2322)
问题是我得到的服务器端生成的 HTML 有:
<link href="..." rel="stylesheet" media="print" />
Run Code Online (Sandbox Code Playgroud)
只有当页面重新水化后,它才会更新为:
<link href="..." rel="stylesheet" media="all" onload="this.media='all'">
Run Code Online (Sandbox Code Playgroud)
我在 GitHub 上发现了这个问题,但它没有帮助,因为我没有使用 Google Fonts,而是使用 Typography.com,所以我无法使用next-google-fonts: https: //github.com/vercel/next.js/issues/ 12984
我正在考虑ref向该link标签添加 a 并使用 设置属性setAttribute,这希望也能在服务器端工作,但想知道是否有更简单的方法来做到这一点。