CODEWITHSUNDEEP
reactjsnext.jsfrontendhydrationdevice-detection
Nikita
Nikita

Reputation: 124

Hydration issue in mobile view in nextjs 14

Getting hydration issue in mobile responsive view once I refresh the page, it works fine on desktop view but as soon as I check in mobile view and refresh it this appears. I'm using Nextjs 14.1.0(SSG) Listing the console errors below:

  1. Warning: Prop "href" did not match. Server: "http://localhost:3000" Client: "http://localhost:3000/"
  2. Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.
  3. Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
  4. Uncaught Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

Tried checking the <p>,<button> nested in other <p> tags,etc but no such thing. Build is working fine & desktop view too but as soon as I switch to mobile mode and refresh, this issue pops up. Suspecting it might be related to react-device-detect

Upvotes: 1

Views: 546

Answers (0)

Related Questions