Render different components based on screen size in Next.js

[theairbend3r]

I'm trying to render render a component differently based on if the screen width < 768p.

If it is less than 768p, then load the hamburger menu. If not, load the entire menu.

Here's the code I use. The issue is, when the page first loads, I cannot observe the changes. But when I make the browser screen small and then increase it to it's original size; the effects take place.

I think it's because React is being rendered server-side. But still don't understand why it works by making the screen smaller and then bigger again.

import "twin.macro"
import { Global, css } from "@emotion/core"

import { useState, useEffect } from "react"

const Navbar = () => {
  const useWindowDimensions = () => {
    const hasWindow = typeof window !== "undefined"

    function getWindowDimensions() {
      const width = hasWindow ? window.innerWidth : null
      const height = hasWindow ? window.innerHeight : null
      return {
        width,
        height,
      }
    }

    const [windowDimensions, setWindowDimensions] = useState(
      getWindowDimensions()
    )

    useEffect(() => {
      if (hasWindow) {
        function handleResize() {
          setWindowDimensions(getWindowDimensions())
        }

        window.addEventListener("resize", handleResize)
        return () => window.removeEventListener("resize", handleResize)
      }
    }, [hasWindow])

    return windowDimensions
  }

  const { height, width } = useWindowDimensions()
  const breakpoint = 768

  return (
    <div>
      {width <= breakpoint ? (
        <div>
          <HamburgerMenu />
        </div>
      ) : (
        <div>
           <FullMenu />
        </div>
  )
}

export default Navbar

Is there a way I can force the Next.js app to apply the effects on the first render?

[elchaparrito1]

I'm in the exact same situation, and would love to see a response posted here. I need one of my Next.js components to know the innerWidth of the window object on the initial render.

[jrgarciadev]

Hi, you can use a media query hook

import { useState, useCallback, useEffect } from 'react';

const useMediaQuery = (width) => {
  const [targetReached, setTargetReached] = useState(false);

  const updateTarget = useCallback((e) => {
    if (e.matches) {
      setTargetReached(true);
    } else {
      setTargetReached(false);
    }
  }, []);

  useEffect(() => {
    const media = window.matchMedia(`(max-width: ${width}px)`);
    media.addListener(updateTarget);

    // Check on mount (callback is not called until a change occurs)
    if (media.matches) {
      setTargetReached(true);
    }

    return () => media.removeListener(updateTarget);
  }, []);

  return targetReached;
};


const Navbar = () => {
   const isBreakpoint = useMediaQuery(768)
   return (
    <div>
      { isBreakpoint ? (
        <div>
          <HamburgerMenu />
        </div>
      ) : (
        <div>
           <FullMenu />
        </div>
   )
)}

export default Navbar;

[n8slo88]

Awesome. Yes. I couldn't compile as addEventListener was looking for 2 arguments. I had to add "change". thank you.

[dlsaldanas]

just a little update

const useMediaQuery = (width) => {
  const [targetReached, setTargetReached] = useState(false);

  const updateTarget = useCallback((e) => {
    if (e.matches) {
      setTargetReached(true);
    } else {
      setTargetReached(false);
    }
  }, []);

  useEffect(() => {
    const media = window.matchMedia(`(max-width: ${width}px)`);
    if (media.addEventListener) {
      media.addEventListener("change", updateTarget);
    } else {
      // compatibility for browser that dont have addEventListener
      media.addListener(updateTarget);
    }
    // Check on mount (callback is not called until a change occurs)
    if (media.matches) {
      setTargetReached(true);
    }
    if (media.removeEventListener) {
      return () => media.removeEventListener('change', updateTarget);
    } else {
      // compatibility for browser that dont have removeEventListener
      return () => media.removeListener(updateTarget);
    }
  }, []);

  return targetReached;
};

[devDanielCespedes]

I love you

[rishabh1S]

Here is an update for useMediaQuery for the latest versions.

const useMediaQuery = (width: number) => {
  const [targetReached, setTargetReached] = useState(false);

  const updateTarget = useCallback((e: MediaQueryListEvent) => {
    if (e.matches) {
      setTargetReached(true);
    } else {
      setTargetReached(false);
    }
  }, []);

  useEffect(() => {
    const media = window.matchMedia(`(max-width: ${width}px)`);
    media.addEventListener("change", updateTarget);

    if (media.matches) {
      setTargetReached(true);
    }

    return () => media.removeEventListener("change", updateTarget);
  }, []);

  return targetReached;
};

[ygorbunkov]

Regardless of the media query string passed to window.matchMedia().matches it cannot be evaluated to true on the server (as window is undefined).

This will result in default layout (let it be mobile) rendered server side and then (once React kicks in) reflow on the client (which may happen to be desktop).

Under condition of slow internet connection it may appear to user as content jitter similar to FOUC causing layout shift and subsequently hitting web app performance and overall UX badly.

One possible solution of that problem could be based on client hint header which is not yet part of the standard by now.

[jonrrivera]

amazing will try this out. thanks for the help - Jon Rivera jonrrivera.com

…

On Sep 3, 2020, at 12:06 PM, Junior Garcia ***@***.***> wrote:  Hi, you can use a media query hook `import { useState, useCallback, useEffect } from 'react'; const useMediaQuery = (width) => { const [targetReached, setTargetReached] = useState(false); const updateTarget = useCallback((e) => { if (e.matches) { setTargetReached(true); } else { setTargetReached(false); } }, []); useEffect(() => { const media = window.matchMedia((max-width: ${width}px)); media.addListener(updateTarget); // Check on mount (callback is not called until a change occurs) if (media.matches) { setTargetReached(true); } return () => media.removeListener(updateTarget); }, []); return targetReached; }; const Navbar = () => { const isBreakpoint = useMediaQuery(768) return ( { isBreakpoint ? ( ) : ( ) )} export default Navbar; — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[ayobamiseun]

do we need to "use client"

[estate-market-admin]

Using Dynamic import should do the trick

`'use client'

import { useState } from 'react'
import dynamic from 'next/dynamic'

// Client Components:
const ComponentA = dynamic(() => import('../components/A'))
const ComponentB = dynamic(() => import('../components/B'))

export default function ClientComponentExample() {
const [isMobile, setIsMobile] = useState(false)

// manage which viewport somewhere here

return (

{/* Only load either component A or B depending on viewport */}
{ isMobile ? : } }

)
}
`

[bennik88]

So does this code runs serverside and therefore preserve static or serverside rendered pages? I thought using useEffect would mean you opt out of serverside rendering?

[mattapperson]

This means that the SSR will always return false from this hook

[ygorbunkov]

You seem to be confusing RSC with SSR. Client components (making use of media queries to offer responsive UI) may still be rendered on the server while resulting HTML will correspond to window.matchMedia().matches evaluated to false and then reflow (if necessary) will happen on the client. You're right though, in order for window.matchMedia() to ever result into something else than reference error, it has to be client component.

[bdombro]

The proposed solution is very flawed since it causes mismatches between server-render and client-render. I'd love to see an official solution for this.

[BhavyaCodes]

I think the only way to do this would be to get this data from nextjs app context, more specifically the User-Agent request header to somewhat detect the device type, I don't know about app router, Im only talking in context of getServerSideProps or getInitialProps

[MrProgrammer]

it could be OK on server component for SSR

import { headers } from 'next/headers'

export const getDeviceType = () => {
const headersList = headers()
const userAgent = headersList.get('user-agent')

return userAgent!.match(
/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i
)
? 'mobile'
: 'desktop'
}

[mdjfs]

you're a genius. Thank you !

[ygorbunkov]

User-Agent header is not quite reliable (as it can be spoofed by certain browsers). Furthermore, this approach doesn't scale too well as you won't be able to make a difference between tablet and mobile which you might require.

[nil1511]

Use Sec-CH-UA-Mobile client hint for server-side rendering for mobile and desktop, and fallback to user-agent for Safari. There is also a Viewport-Width client hint which gives width on the server but that is deprecated

[NakZMichael]

Can we cache rendered result separately for desktop and mobile if we use user-agent?

[MrProgrammer]

we use user-agent for not render mobile component on desktop size and vice versa
it's not ok we render mobile component on dektop size!

[Athar-Naveed]

[sFritsch09]

I do the same like @Athar-Naveed but I use screen.width instead:

...
setWidth(screen.width);
...

[ygorbunkov]

The approach based on window.matchMedia() seems to be much cleaner as it doesn't require any handcrafting to keep track of the screen width on resize.

And just like media queries, window.innerWidth will result into certain default layout rendered on the server (where no innerWidth exists) and then (once React kicks in on the client) trigger reflow, which will hit badly UX in general and CLS, in particular.

Furthermore, leaning onto addEventListener() would require debounce not to overwhelm the client by triggering state updates per every pixel of width change while stretching the window.

[impsdc]

Hi guys, I'm trying to achieve this in Next 14 app router in middleware.ts. I use userAgent to retrieve the device information but it always undefined, Is this normal ?
When I retrieve "user-agent" from the headers, I get a string but I can't find a way to determine the client window.width using it.

import { headers } from "next/headers";
import { type NextRequest, userAgent } from "next/server";

export function middleware(request: NextRequest) {
	const { device } = userAgent(request);  // undefined
	const headersList = headers();
	const usrAgent = headersList.get("user-agent"); // Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36
}

Any help ?

[ygorbunkov]

There's no way to find out the exact screen width using User-Agent header. Moreover, this particular header may be spoofed (for anonymity purpose) by certain browsers.

[ibanlopez]

There's no way to find out the exact screen width using User-Agent header. Moreover, this particular header may be spoofed (for anonymity purpose) by certain browsers.

https://developer.chrome.com/docs/privacy-security/user-agent-client-hints

[ArshlanSiddique1]

It's work for me on next.js 14.

------------------- Custom Hook for Getting MediaQuery , Device Type or Width for Next.js 14. ------------------------------
import { useState, useEffect } from 'react';

const useMediaQuery = (query) => {
const [matches, setMatches] = useState(false);

useEffect(() => {
    const media = window.matchMedia(query);
    if (media.matches) {
        setMatches(true);
    }

    const listener = (event) => setMatches(event.matches);
    media.addEventListener('change', listener);

    return () => media.removeEventListener('change', listener);
}, [query]);

return matches;

};

export default useMediaQuery;

---------------------------- Use cases on component ---------------------------
import useMediaQuery from './useMediaQuery';

const isMobile = useMediaQuery('(max-width: 768px)');
const isTablet = useMediaQuery('(min-width: 768px) and (max-width: 992px)');
// ... other media queries

return (

{isMobile &&

This content is displayed on mobile devices.

}

);

[ibanlopez]

This is what I use:

I define a custom hook: use-media-query.ts in a lib folder:

src/lib/hooks/use-media-query.ts:

'use client'

import { useState, useEffect } from 'react'

export default function useMediaQuery(query: string): boolean {

    const [matches, setMatches] = useState(false)

    useEffect(() => {
        const media = window.matchMedia(query)

        if (media.matches !== matches) {
            setMatches(media.matches)
        }
        const listener = () => {
            setMatches(media.matches)
        }
        media.addEventListener('change', listener)
        return () => media.removeEventListener('change', listener)
    }, [matches, query])

    return matches
}

Then I create a client component to deal with the browser, but most importantly, to be able to render RSC components:

src/components/composables/media-rendering.tsx:

'use client'

import useMediaQuery from '@/lib/hooks/use-media-query'

const MediaRendering = ({
    minWidth, maxWidth, children
}: {
    minWidth: string | null,
    maxWidth: string | null,
    children: React.ReactNode
}) => {

    const minDeviceSize = useMediaQuery(`(min-width: ${minWidth}px)`)
    const maxDeviceSize = useMediaQuery(`(max-width: ${maxWidth}px)`)

    return (
        <>{(maxDeviceSize || minDeviceSize) && children}</>
    )
}

export default MediaRendering

So, let's suppose I have a navbar.tsx that I need to render differently for mobile and desktop:

import MediaRendering from '@/components/composables/media-rendering'
import NavMenu from './nav-menu'
import Logo from './logo'
import Hamburger from './hamburger-button'

export default function Navbar() {
    const menuLinks = // Do the fetch for links here.
    return (
        <nav className="absolute top-0 z-50 left-0 w-full">
            <div className="relative bg-transparent w-full p-4 flex flex-row flex-wrap items-center md:py-4 md:px-10 lg:flex-nowrap lg:p-4 xl:max-w-screen-xl xl:mx-auto z-30 xlnp:px-0">
                <Logo />
                <MediaRendering minWidth={null} maxWidth="1023">
                    <Hamburger>
                        <NavMenu menuLinks={menuLinks} />
                    </Hamburger>
                </MediaRendering>
                <MediaRendering minWidth="1024" maxWidth={null}>
                    <NavMenu menuLinks={menuLinks} />
                </MediaRendering>
            </div>
        </nav>
    )
}

Just FYI: this would be the NavMenu.tsx:

import Link from 'next/link'

export default function NavMenu({ menuLinks }: { menuLinks: {
    id: number,
    link: string,
    text: string,
    title: string
}[] }) {

    const renderedLinks = menuLinks.map(link => {
        return (
            <li key={link.id} className="flex-initial w-full text-white border-b border-b-white last:border-b-0 hover:bg-yellow-600 lg:text-yellow-400 lg:hover:bg-transparent lg:w-auto lg:border-b-0">
                <Link
                    href={link.link}
                    title={link.title}
                    className="px-4 py-2 block w-full font-semibold antialiased"
                >
                    {link.text}
                </Link>
            </li>
        )
    })

    return (
        <ul className="w-full flex flex-row flex-wrap rounded-md bg-yellow-500 lg:grow lg:flex-nowrap lg:bg-transparent lg:justify-end xl:w-[600px]">
            {renderedLinks}
        </ul>
    )
}

[Mainak908]

Thanks bro.It worked for me.thnx a lot.I was exactly looking for this solution

[jsefiani]

Hey @ibanlopez , what do you mean by:

but most importantly, to be able to render RSC components

Is it because you can pass a server component to MediaRendering as children?

Why don't you use something like react-responsive?

[jsefiani]

Using this approach won't prevent the layout from flickering 😓

[ibanlopez]

react-responsive

Hey @ibanlopez , what do you mean by:

but most importantly, to be able to render RSC components

Is it because you can pass a server component to MediaRendering as children?

Why don't you use something like react-responsive?

Sorry for the delay in my answer. I usually don't need so much stuff in order to achieve this. Performance for me is key.

And yes, I pass a React server Component as the children of the MediaRendering.

[ibanlopez]

Using this approach won't prevent the layout from flickering 😓

If by "flickering" you mean that you experience shift arounds that affect CLS, that's out of the scope of the way you use to render something different from another thing.

Either way you use it's going to cause "flickering" if the height of those components are different. You fix this with CSS, skeletons, or even there's no possible "flickering" if you load it once, which is the purpose of this method. But let's say you are in a tablet device, the orientation would cause a re-render: in this case you have to control the heigh.

[ibanlopez]

For the record:

You can go just with one minWidth or maxWidth prop, there's no need to be so verbose. So you either render or not based in one prop only, the best it suits your goal over the design.

In this particular case I had to use this MediaRendering twice in the component because there's a difference in what I want to render inside them, but that does not happen so often.

Normally you render something or not at all based on the device width, so you only need a prop.