我在创建新的 Next.js 应用程序时遇到错误，没有添加任何代码

Question

我在创建新的 Next.js 应用程序时遇到错误，没有添加任何代码。

npx [电子邮件受保护] --ts

嗨。没有添加任何代码的新应用程序出现错误是没有意义的。

错误信息是： hook.js:608 树已水合，但服务器呈现的 HTML 的某些属性与客户端属性不匹配。这不会被修补。如果使用 SSR 客户端组件，就会发生这种情况：

• 服务器/客户端分支

  if (typeof window !== 'undefined')

  。
• 变量输入，例如

  Date.now()

  或

  Math.random()

  ，每次调用时都会发生变化。
• 用户区域设置中的日期格式与服务器不匹配。
• 外部更改数据，无需将其快照与 HTML 一起发送。
• 无效的 HTML 标签嵌套。

再说一次，这是一个新鲜的应用程序，我绝对没有添加任何东西！！

Answer 1

当您的浏览器扩展在下一次水合之后修改代码时，这种情况经常发生，这就是为什么有时它被标记为水合警告的原因。这里明显的标志是 Date.now 和 Math.random，它们显然不在您的新应用程序中，并且来自扩展程序的注入代码。

解决这个问题：

开始删除 chrome 扩展，例如覆盖页面的 grammerly、css 颜色选择器等。如果您没有这样的扩展，那么只需将它们删除我的一个即可（您可以轻松地将它们添加回来）。一旦发现导致问题的扩展，只需将其禁用或在调试应用程序时不要使用它即可。