Client Device Detection in Next.js 13
Sometimes you may need to know where your web app is being run, and what sort of a device is being used for that. Is it a pc? is it a mobile device? and even, if it is a mobile, what OS is being used for that so you can adjust the views and make your app look more responsive or eliminate some functionality which will not work on this device or the other.
I faced this issue with one of my apps developed in Next.js. So, I went checking on the net. There were some libraries which can be used for that, but I didn’t want to use libraries. I don’t like to depend much on libraries. Also, I found an article which uses getInitialProps to get the dives type, as it is a SSR tool and it returns the data in the page component props. That sounded great 😃.
So, I tried it. I was using Next.js 13 with the src/app feature. No matter how much I tried and how I tried it. I wasn’t able to get this thing to work. And after a couple of hours of digging in google and even on youtube, I noticed that this is always implemented in the old pages/ component, which meant, it is in an older version Next.js 😫.
So, I thought to myself 🤔, the article which used getInitialProps() used the headers returned in the page request, so why use the same approach? That lead me to discover the Next.js’s headers API 🤩.
