Nextjs: Link-Element führt zu Hydratationsfehlern ⇐ JavaScript

[Guest]

Ich untersuche viele Hydratationsfehler auf meiner Seite, die anscheinend von meiner Migration im letzten Jahr von einer alten nächsten Version auf die aktuellste Version 15.x herrühren. Siehe Screenshots unten:

Code: Select all

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

und

Code: Select all

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

Was ich aus diesen Fehlern verstehe, ist: Das aktuelle HTML des Clients stimmt nicht mit dem überein, was wir auf der Clientseite vorberechnet haben.
was seltsam ist weil ich die Anweisung „use client“ in der Komponente verwendet habe.
Ich könnte all dies in einer Schaltflächenkomponente zusammenfassen, die eine next/link-Komponente verwendet. Deshalb habe ich es so weit wie möglich vereinfacht, aber egal, wie ich diese Komponente bearbeite, es werden Hydratationsfehler in der Konsole angezeigt. Ich habe verschiedene Möglichkeiten ohne Containerelement usw. ausprobiert:

Code: Select all

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

const ButtonComponent = function () {
return (

Button
)
}
export default ButtonComponent

Sobald ich jedoch next/link in dieser Situation entferne, sind alle Flüssigkeitsfehler behoben

Code: Select all

'use client'
import React from 'react'

const ButtonComponent = function () {
return (

Button
)
}
export default ButtonComponent

was ich nicht will – das sollte eine wiederverwendbare Schaltfläche sein, die untergeordnete Elemente und href als Requisiten abruft und untergeordnete Elemente rendert.
Wie löse ich das? Das? Habe ich eine falsche Vorstellung?
[

]