I have built an adaptive website in Next js; Which has two versions one for mobile devices and another for Desktop. Both versions are separate Nextjs projects deployed on two different env. I want to deploy both on the same domain and load the respective versions based on user-agent.
example: www.test.com will load mobile site if found mobile User-Agent else Desktop site
I'm able to load the respective version of the site If I have a sub-domain like "m.test.com" for the mobile version and "test.com" for the desktop version ( for this I have added redirect logic in next.config.js based on User-Agent).
I don't know where to write the logic to render a specific build based on User-Agent on the same domain.
If you have two different Node Apps running and want to redirect based on User Agent, you can use nginx's $http_user_agent to rewrite to different ports where your Apps can listen on:
http {
map $http_user_agent $ua_port {
default '3000'; # port 3000 for your desktop App
~(iPhone|Android) '4000'; # port 4000 for mobile App
}
server {
location / {
proxy_pass http://localhost:$ua_port; # proxy_pass to port
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
}