Next.js Error: Hydration failed because the initial UI does not match what was render

Error: Hydration failed because the initial UI does not match what was

rendered on the server.

本来在项目中写了个判断渲组件的逻辑，结果报这么个错误

Error: Hydration failed because the initial UI does not match what was
rendered on the server.

const ThemeComponent = () => {
    if (theme === 'sun') {
        return <div>
            <IconSun
                style={{ color: "#000" }}
                className="text-[20px]"
            />
        </div>
    } else {
        return <div>
            <IconMoon
                style={{ color: "#000" }}
                className="text-[20px]"
            />
        </div>
    }
}

return <div 
	className="
         w-[40px] h-[40px] cursor-pointer 
         mt-[20px] bg-white rounded-[100px]
         flex justify-center items-center
     "
     onClick={handleTheme}
     style={{ boxShadow: '0 0 10px rgba(0,0,0,.1), 0 5px 20px rgba(0,0,0,.2)' }}
 >
    <ThemeComponent />
</div>

查了下相关文章 发现可以用这个解决方法
参考文章：https://cloud.tencent.com/developer/article/2282752

import React from "react";
import dynamic from "next/dynamic";
const NoSSR = (props: any) => <React.Fragment>{props.children}</React.Fragment>;
const NoSSRComponent = dynamic(() => Promise.resolve(NoSSR), {
    ssr: false
});

const ThemeComponent = () => {
    if (theme === 'sun') {
        return <div>
            <IconSun
                style={{ color: "#000" }}
                className="text-[20px]"
            />
        </div>
    } else {
        return <div>
            <IconMoon
                style={{ color: "#000" }}
                className="text-[20px]"
            />
        </div>
    }
}

return <div 
	className="
         w-[40px] h-[40px] cursor-pointer 
         mt-[20px] bg-white rounded-[100px]
         flex justify-center items-center
     "
     onClick={handleTheme}
     style={{ boxShadow: '0 0 10px rgba(0,0,0,.1), 0 5px 20px rgba(0,0,0,.2)' }}
 >
 	<NoSSRComponent>
    	<ThemeComponent />
    </NoSSRComponent>
</div>

判断组件外套一层 NoSSRComponent 组件即可