Next.js13/14空Hello World页面div根元素水合错误解决

问题现象 #

学习Next.js 13/14版本时，跟随YouTube教程实践，发现将页面根元素设置为<div>会触发水合错误，但改用<html>作为根元素时一切正常。

复现步骤 #

• 执行命令 npx create-next-app@latest 创建全新Next.js项目
• 清空自动生成的page.tsx文件内容，仅保留如下代码：

  export default function Home() {
    return <div>Hello world</div>;
  }
  

• 运行 npm run dev，页面出现水合错误

排查结论 #

最终确认问题由浏览器扩展导致，禁用相关扩展后即可恢复正常。

内容的提问来源于stack exchange，提问作者Leandro Beni