Next js conditional rendering depending on the device
Unanswered
Beveren posted this in #help-forum
BeverenOP
with Next.js App Router with Conditional Rendering, when you want to render one component for a mobile device, and another component for a desktop device. I'm using Material UI with Next.js and I have such a problem that if I use, for example, Hook UseMediaQuery for Conditional Rendering, then I end up with a component that is rendered if the condition is true and appears later than the rest of the content on the screen. Because of this, an ugly twitching occurs, a small flash in this component. Has anyone encountered this problem with Next.js, in particular with Material UI? I don’t know how to fix this, because I can’t find adequate solutions on the Internet yet.
2 Replies
@Beveren with Next.js App Router with Conditional Rendering, when you want to render one component for a mobile device, and another component for a desktop device. I'm using Material UI with Next.js and I have such a problem that if I use, for example, Hook UseMediaQuery for Conditional Rendering, then I end up with a component that is rendered if the condition is true and appears later than the rest of the content on the screen. Because of this, an ugly twitching occurs, a small flash in this component. Has anyone encountered this problem with Next.js, in particular with Material UI? I don’t know how to fix this, because I can’t find adequate solutions on the Internet yet.
I done it with tailwind and their responsive system and never saw flashes. Maybe that's a solution for you. If you want to know it serverside to directly render the correct stuff serverside, you can use a package called
react-device-detect. It will get the user agent from the headers and give you the result if it's mobile or chrome or desktop or ...@Beveren solved?