所以我在我的 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="..."，所以问题是谷歌无法将此识别为链接
有人可以解释为什么会发生这种情况吗？有没有办法阻止这种情况发生？
最佳答案
这是因为Next介绍了Font Optimization :
By default, Next.js will automatically inline font CSS at build time, eliminating an extra round trip to fetch font declarations.
因此，它将 href 修改为 data-href 因为它不再需要 href 因为它不会在客户端。我完全不确定为什么它需要 data-href，我认为它可以在构建后丢弃 URL。
关于reactjs - href 变成 data-href，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68502192/