Next.js中使用Link组件的客户端按钮组件引发水合错误的解决方案咨询

还有另一个类似的报错：

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

我理解这类错误是说客户端当前渲染的HTML和服务器预渲染的内容不匹配，但奇怪的是，我已经在组件里添加了'use client'声明了啊。

我把所有错误都定位到了一个使用next/link的按钮组件上。我已经把这个组件简化到最简形式了，但不管怎么修改，控制台都会抛出水合错误。我试过去掉容器元素等各种尝试，比如下面的代码：

'use client'
import React from 'react'
import Link from 'next/link'

const ButtonComponent = function () {
  return (
     <button>
      <Link href="/">Button</Link>
    </button>)
}
export default ButtonComponent

但只要我把组件里的next/link去掉，所有水合错误就都消失了：

'use client'
import React from 'react'

const ButtonComponent = function () {
  return (
     <button>
      Button
    </button>)
}
export default ButtonComponent

可我不想这么做啊，我需要的是一个可复用的按钮组件，能接收children和href作为props来渲染内容。

想请教大家：我该怎么解决这个问题？是不是我对Next.js的某些概念存在误解？

备注：内容来源于stack exchange，提问作者TheDomis4