reactjs - Href 变成 data-href

Question

所以我在我的 Next JS 应用程序中遇到了这个奇怪的问题，我导入了谷歌字体，如下所示

<link
 href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500&family=Source+Serif+Pro:wght@300;400;500&display=swap"
rel="stylesheet"
    
/>

而不是我的浏览器中的href，它显示data-href =“...”，所以问题是谷歌不认为这是链接

有人可以解释为什么会发生这种情况，有没有办法阻止这种情况发生？

标签： reactjsfontsnext.jshrefgoogle-webfonts

Answer 1

这是因为 Next 引入了字体优化：

默认情况下，Next.js 将在构建时自动内联字体 CSS，从而消除了获取字体声明的额外往返。

因此，它被修改href为data-href因为它不再需要href，因为它不会在客户端上发出该请求。我不确定它为什么需要它data-href，我认为它可以在构建后丢弃 URL。