How to detect mobile device with NextJS

Question

There are many topics and SO questions. but I don't find the best solution to detect mobile device.

I have two components. the first component is only for desktop, the second component is only mobiles.

{isMobile? 
(<SecondComponent />) 
: 
(<FirstComponent />)
}

most solutions used getInitialProps function. but the Nextjs says:

Recommended: getStaticProps or getServerSideProps.

link

Does this answer your question? [What is the best way to detect a mobile device?](https://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device) — Samathingamajig, Jun 14 '21 at 18:59
@Samathingamajig No, because nextjs has a Sever-Side rendering. — S.M_Emamian, Jun 14 '21 at 19:01
Look at the userAgent of the request instead of `window.navigator` — Samathingamajig, Jun 14 '21 at 19:02
@Samathingamajig Have u a Nextjs Developer? because Nextjs has different way with jquery library. — S.M_Emamian, Jun 14 '21 at 19:04
Yes I have worked with NextJS before, there were also vanilla JS answers on that post I linked. Here's another one https://stackoverflow.com/a/61519537/12101554 — Samathingamajig, Jun 14 '21 at 19:06

score 1 · Answer 1 · answered Jun 14 '21 at 18:59

1

You use something like this:

export const isMobileDevice = () => /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);

answered Jun 14 '21 at 18:59

Abhishek Sharma

2,485
1
21
35

This is just a copy of https://stackoverflow.com/a/3540295/12101554 with less possible options – Samathingamajig Jun 14 '21 at 19:01
userAgents are unreliable. You should avoid trusting them. – samuei Jun 14 '21 at 19:02
If you want to be dependent on client based information, anything can be unreliable. They only way is to trust your clients and do necessary validations at backend. :) – Abhishek Sharma Jun 14 '21 at 19:29

score 1 · Answer 2 · answered Jun 14 '21 at 19:00

1

The simple way is to let the browser tell you with matchMedia:

let isMobile = window.matchMedia("(max-width: 600px)").matches;

answered Jun 14 '21 at 19:00

samuei

1,949
1
10
26

An average-sized phone on it's side would register as a computer – Samathingamajig Jun 14 '21 at 19:02
You can adjust the width as you like. – samuei Jun 14 '21 at 19:02
1

This would return true if it's a browser window with < 600 px width. So probably not the best solution. – Baruch Jun 14 '21 at 19:03
1

You would want to show the user a UI that was different then too. – JohnAllen Nov 06 '21 at 12:06

Baruch · Answer 3 · 2021-06-14T19:11:56.590

0

I haven't tried this, but this post suggesest using req.device. So you could probably do something like this

export async function getServerSideProps(context) {
 
  return {
    props: {
      device: context.req.device,
    },
  }
}

Edit: You will need express-device installed.

edited Jun 14 '21 at 19:11

answered Jun 14 '21 at 19:07

Baruch

2,381
1
17
29

1

You forgot to mention that you need the `express-device` middleware. Also, can express middleware work with NextJS? – Samathingamajig Jun 14 '21 at 19:11
@Samathingamajig sorry I didn't see the second part of your comment. Yea, you can have a custom server with express – Baruch Jun 14 '21 at 19:27

score 0 · Answer 4 · answered Jul 06 '23 at 13:46

I get this solution, check the width of the user device, based on that you decide if they are on mobile or desktop. I'm using Nextjs12.

//PageLayout.js

import Head from "next/head"
import { Footer } from "./footer/Footer.js"
import dynamic from "next/dynamic.js"
import { useCheckUserWidth } from "../context/CheckUserWidth.js"

const NavBar_Mobile = dynamic(() => import("./navBar/mobile/NavBar_M.js").then((mod) => mod.NavBar_M), { ssr: false })
const NavBar_Desktop = dynamic(() => import("./navBar/desktop/NavBar_D.js").then((mod) => mod.NavBar_D), { ssr: false })

export const PageLayout = ({ children}) => {
  const { isMobile } = useCheckUserWidth()

  return (
    <>
      <Head>
        <title>My webpage</title>
      </Head>

      {isMobile ? (
        <>
          <NavBar_Mobile />
        </>
      ) : (
        <>
          <NavBar_Desktop />
        </>
      )}

      <main>{children}</main>

      <Footer />
    </>
  )
}

The components to use, desktop and mobile

//NavBar_D.js & NavBar_D.js 

export const NavBar_D = () => {//Code nav bar for desktop here...}
export const NavBar_M = () => {//Code nav bar for mobile here...}

Context

//CheckUserWidth.js

import { createContext, useContext } from "react"
import { useWidthSize } from "../utils/useWidthSize"

const CheckUserWidth = createContext(null)

export const CheckUserWidth_Provider = ({ children }) => {
  const { isMobile } = useWidthSize()

  return (
    <CheckUserWidth.Provider
      value={{
        isMobile
      }}>
      {children}
    </CheckUserWidth.Provider>
  )
}

export const useCheckUserWidth = () => {
  return useContext(CheckUserWidth)
}

Wrap the app with the context provider

//_app.jsx

function MyApp({ Component, pageProps }) {
  return (
    <CheckUserWidth_Provider>
      <PageLayout>
        <Component {...pageProps} />
      </PageLayout>
    </CheckUserWidth_Provider>
  )
}

Finally, the customHook to check the width of the user device

//useWidthSize.js

import { useEffect, useState } from "react"

export const useWidthSize = () => {
  const [widthWindow, setWidthWindow] = useState(768)
  const [isMobile, setIsMobile] = useState(true)

  useEffect(() => {
    const handleResize = () => {
      const widthWindowInsideResize = window.innerWidth
      if (widthWindowInsideResize <= widthWindow) {
        setIsMobile(true)
      } else {
        setIsMobile(false)
      }
    }

    window.addEventListener("resize", handleResize)
    handleResize()

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

  return { isMobile, widthWindow }
}

I hope this help.

How to detect mobile device with NextJS

4 Answers4