Nextjs: элемент Link приводит к ошибкам гидратации ⇐ Javascript

[Anonymous]

Я исследую множество ошибок гидратации на своей странице, которые, по-видимому, возникли в результате моего прошлогоднего перехода со старой следующей версии на самую последнюю версию 15.x. См. скриншоты внизу:

Код: Выделить всё

Unhandled Runtime Error Expected server HTML to contain a matching  in .

и

Код: Выделить всё

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
)
}
export default ButtonComponent

однако, как только я избавлюсь от next/link в этой ситуации, все ошибки гидратации будут устранены

Код: Выделить всё

'use client'
import React from 'react'

const ButtonComponent = function () {
return (

Button
)
}
export default ButtonComponent

а это не то, что мне нужно — это должна быть кнопка многократного использования, которая получает дочерние элементы и href в качестве реквизитов и отображает дочерние элементы.
как мне решить эту проблему? этот? У меня неправильное представление?
[

]

Подробнее здесь: https://stackoverflow.com/questions/793 ... ion-errors