如何在Next.js中传递自定义HTML属性并避免相关警告？

你代码里写的data-anima、data-time自定义属性符合HTML规范，不会触发该警告。警告提示的Extra attributes from the server: style是典型的React水合不匹配问题：服务端渲染返回的DOM中对应节点没有style属性，但客户端首次加载执行JS时给该节点追加了style属性，React对比两端DOM结构不一致就抛出了警告。
常见触发原因：

• 你使用的动画效果库在客户端初始化阶段，提前给待执行动画的元素加了opacity、transform这类初始内联样式，这部分逻辑只在客户端执行，服务端渲染时不会运行
• 本地安装的浏览器插件（如翻译插件、广告拦截、划词工具类插件）篡改了页面DOM，给元素追加了style属性
• 业务代码里在组件首次挂载前就操作了DOM给元素加了内联样式，服务端没有执行该逻辑

按实际触发场景选择对应方案即可：

• 如果是浏览器插件导致：该警告仅会在本地开发环境出现，生产环境普通用户访问不会触发，不需要额外处理，直接忽略即可。可以打开浏览器无痕模式（默认禁用所有扩展）验证，如果无痕模式下警告消失即可确认是插件问题。
• 如果是动画库或业务逻辑导致的水合不一致：
  1. 最简便的方案是给对应元素加React官方提供的suppressHydrationWarning属性，该属性仅会抑制当前单个节点的水合属性校验，不会影响其他节点的水合逻辑，也不会带来额外性能损耗：

  <div
      className="col-lg-6"
      data-anima="fade-bottom"
      data-time={1000}
      suppressHydrationWarning={true}
  ></div>
  

  2. 调整动画初始化逻辑，把DOM操作、样式追加的逻辑放到useEffect回调里执行，保证服务端渲染输出和客户端首次渲染的DOM完全一致，等组件完成挂载后再执行动画绑定、初始样式设置的操作。
  3. 如果你用的是Next.js 13+ App Router模式，可以给依赖客户端能力的组件顶部加上'use client'标记，避免服务端提前渲染出和客户端不一致的DOM结构。

注意：不要为了消除警告强行把整页组件改成纯客户端渲染，会损失SSR带来的首屏加载性能收益，优先用单节点抑制警告的方案处理，改造成本最低。

内容的提问来源于stack exchange，提问作者János