No longer run smoothly at Next.js 13 + React.js 18 (Typescript)

[mashwishi]

1. Bug description

   • When trying to implement a conditional isMobile to print content it returns issues (unlike on previous setup at Nextjs 12 + React 17)

2. Steps to reproduce

   • Create a page where there is a condition that will return a component for mobile and desktop

3. Device user-agent Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 Edg/114.0.1823.82

4. Device/Browser type/name Windows 11 Pro 64Bit - Microsoft Edge

5. Code

6. Issue:

[mashwishi]

Just to let you know i have also tried this method

[mashwishi]

This is my temp solution:

[Keeper991]

I solved this problem by using useState, which has false as an initial value, and useEffect, which calls 'setState(isMobile)' at the time of componentDidMount.

I think it happens if there is a difference between the initial rendering result of client-side and the server-side rendering result.

[anoop0567]

@mashwishi have you found any better workaround for this?

[mashwishi]

@mashwishi have you found any better workaround for this?

No, I posted my temp solution

[nikhil647]

I found answer on stack overflow. here

Make component server component.

import { getSelectorsByUserAgent } from "react-device-detect"
import { headers } from "next/headers"

const { isMobile } = getSelectorsByUserAgent(
    headers().get("user-agent") ?? ""
  )

  return (
    <>
      {(isMobile) ?
        <nav>Nabar Mobile</nav>
      :
        (
          <h1>This is rendered only on desktop</h1>  
        )
      }
    </>
  );

[naseef0]

I found answer on stack overflow. here

Make component server component.

import { getSelectorsByUserAgent } from "react-device-detect"
import { headers } from "next/headers"

const { isMobile } = getSelectorsByUserAgent(
    headers().get("user-agent") ?? ""
  )

  return (
    <>
      {(isMobile) ?
        <nav>Nabar Mobile</nav>
      :
        (
          <h1>This is rendered only on desktop</h1>  
        )
      }
    </>
  );

@nikhil647 I have tried this but for tablet devices it's detecting as desktop.