Next.js引入Image组件时如何消除‘Warning: Prop `style` did not match’警告？

问题根源 #

警告显示服务端渲染的style属性包含--darkreader-inline-*系列自定义属性，而客户端渲染的style里没有，这是Dark Reader浏览器插件在服务端渲染阶段篡改了元素样式，导致SSR与客户端hydration时样式不一致触发的警告。

可行解决方案 #

1. 临时验证：关闭Dark Reader插件 #

直接关闭浏览器的Dark Reader插件，刷新页面，若警告消失即可确认问题由该插件导致。

2. 添加unoptimized属性（Next.js 12+支持） #

给Image组件添加unoptimized属性，跳过Next.js的图片优化流程，避免插件干扰样式生成：

<Image
  src="/blog-img.svg"
  width={190}
  height={120}
  alt="logo"
  unoptimized
/>

3. 自定义Image组件清理Dark Reader样式 #

若需要保留图片优化功能，可自定义组件在客户端渲染后清理Dark Reader注入的样式：

import NextImage from 'next/image';
import { useEffect, useRef } from 'react';

const CustomImage = (props) => {
  const imgRef = useRef(null);

  useEffect(() => {
    if (imgRef.current) {
      const styleObj = imgRef.current.style;
      Object.keys(styleObj).forEach(key => {
        if (key.startsWith('--darkreader')) {
          styleObj.removeProperty(key);
        }
      });
    }
  }, []);

  return <NextImage ref={imgRef} {...props} />;
};

export default CustomImage;

之后在Header组件中导入该自定义组件替代官方Image：

import Image from './CustomImage'; // 替换为你的自定义组件路径

4. 移除冲突依赖 #

项目中安装的babel-preset-next属于旧版依赖，Next.js 12+已内置SWC编译器，无需该预设，建议卸载避免冲突：

npm uninstall babel-preset-next

内容的提问来源于stack exchange，提问作者Todo-System Todo-System