I am using next.js in my project. I have two static pages, one created only for small screens and one for larger screens. How can I serve the right page to the client based on the user device or screen size?
I am not considering responsive design as many of the components/experience changes with screen size.
My idea is based on the following article:
Found next-useragent which from a cursory glance at the example code seems like it might provide the functionality you are searching for.
Thanks, @coelmay for pointing that out.
However, next-useragent will only be used in getServerSideProps and not in getStaticProps. This will make static pages into server-side rendered dynamic pages.
I was wondering if it would be better to handle it somehow through netlify redirects?
Netlify redirects does not have the ability to determine the user agent making the request.
I have also same issue any suggestion for this so please reply. Thanks in advance.