Separate sites for mobile/small screens and desktop/ large screens

Opentalk
1

Hi!

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:

2

Hi @SauravSingh

Found next-useragent which from a cursory glance at the example code seems like it might provide the functionality you are searching for.

3

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?

4

Netlify redirects does not have the ability to determine the user agent making the request.

5

I have also same issue any suggestion for this so please reply. Thanks in advance.