Issue

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.

Solution

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;
    }
  }
}

Answered By - Luca Kiebel

Answer Checked By - Senaida (WPSolving Volunteer)

Tuesday, April 12, 2022

[SOLVED] How to deploy adaptive Next Js website on a single domain?

Issue

Solution