Styling in Next (conceptual)
Answered
Goldstripe sardinella posted this in #help-forum
Goldstripe sardinellaOP
Hi there. I'm kinda new to NextJS, i've been developing in React mainly until recently.
Making this switch raised a few questions. Among many, right know I have those in mind (any help is greatly appreciated)
My concern revolves around the following concept:
With the server & client components, Next is basically suggesting me to translate all of the Javascript Logic that handles styling and elements' rendering to CSS stuff. When i say that I speak exclusively about responsive design.
So like, instead of having a react approach return (device === "mobile" ? <MobileHeader/> : <DesktopHeader/>), i rather have now return (#Unknown Channel <MobileHeader/> <DesktopHeader/> </>). Is that right? (in the 2nd example, I use display:none based on media queries for responsitivity).
Is that right? Is there a better way to deal with responsive design?
p.s. if you have suggestions about the file structure, i'd be happy to hear 😄
Thanks â¤ï¸
Making this switch raised a few questions. Among many, right know I have those in mind (any help is greatly appreciated)
My concern revolves around the following concept:
With the server & client components, Next is basically suggesting me to translate all of the Javascript Logic that handles styling and elements' rendering to CSS stuff. When i say that I speak exclusively about responsive design.
So like, instead of having a react approach return (device === "mobile" ? <MobileHeader/> : <DesktopHeader/>), i rather have now return (#Unknown Channel <MobileHeader/> <DesktopHeader/> </>). Is that right? (in the 2nd example, I use display:none based on media queries for responsitivity).
Is that right? Is there a better way to deal with responsive design?
p.s. if you have suggestions about the file structure, i'd be happy to hear 😄
Thanks â¤ï¸
Answered by joulev
So like, instead of having a react approach return (device === "mobile" ? <MobileHeader/> : <DesktopHeader/>), i rather have now return (#Unknown Channel <MobileHeader/> <DesktopHeader/> </>). Is that right? (in the 2nd example, I use display:none based on media queries for responsitivity).yes
2 Replies
@Goldstripe sardinella Hi there. I'm kinda new to NextJS, i've been developing in React mainly until recently.
Making this switch raised a few questions. Among many, right know I have those in mind (any help is greatly appreciated)
My concern revolves around the following concept:
With the server & client components, Next is basically suggesting me to translate all of the **Javascript Logic that handles styling and elements' rendering ** to **CSS stuff**. When i say that I speak exclusively about responsive design.
So like, instead of having a react approach ** return (device === "mobile" ? <MobileHeader/> : <DesktopHeader/>)**, i rather have **now return (<> <MobileHeader/> <DesktopHeader/> </>)**. Is that right? (in the 2nd example, I use **display:none** based on **media queries** for responsitivity).
Is that right? Is there a better way to deal with responsive design?
p.s. if you have suggestions about the file structure, i'd be happy to hear 😄
Thanks â¤ï¸
So like, instead of having a react approach return (device === "mobile" ? <MobileHeader/> : <DesktopHeader/>), i rather have now return (#Unknown Channel <MobileHeader/> <DesktopHeader/> </>). Is that right? (in the 2nd example, I use display:none based on media queries for responsitivity).yes
Answer
Broad-snouted Caiman
I saw this example on shadcn UI: https://ui.shadcn.com/docs/components/drawer
Until now, I've being doing what you've discussed above (e.g., "hidden sm:block" for desktop/tablet and "sm:hidden" for mobile), but then I saw this shadcn above, which uses a custom hook. Is this way of doing (custom hook) better, since you will only render the desired component (instead of rendering both, while hiding one)?
Until now, I've being doing what you've discussed above (e.g., "hidden sm:block" for desktop/tablet and "sm:hidden" for mobile), but then I saw this shadcn above, which uses a custom hook. Is this way of doing (custom hook) better, since you will only render the desired component (instead of rendering both, while hiding one)?