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.

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

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 0 · Answer 2 · answered Jun 14 '21 at 19:00

0

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

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

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

3 Answers3