title: Next.js rewrite with x headers
body: <p>I have a web app where users can build their own profiles with their usernames like below.</p>
  <pre><code>ourplatform.com/john
  ourplatform.com/john/about
  ourplatform.com/john/contact
  
  ourplatform.com/jane
  ourplatform.com/jane/about
  ourplatform.com/jane/contact
  </code></pre>
  <p>They can also connect their domains so they have to be using like this.</p>
  <pre><code>john.com
  john.com/about
  john.com/contact
  
  jane.com
  jane.com/about
  jane.com/contact
  </code></pre>
  <p>This is my <code>next.config.js</code>.</p>
  <pre class="lang-js prettyprint-override"><code>module.exports = {
    async rewrites () {
      return [
        {
          source: '/:path*',
          has: [
            {
              type: 'header',
              key: 'x-username',
              value: '(?&lt;username&gt;.*)'
            }
          ],
          destination: '/:username/:path*'
        }
      ]
    }
  }
  </code></pre>
  <p>And this is the Nginx configuration.</p>
  <pre><code>server {
    listen 80;
    server_name john.com;
  
    add_header x-username &quot;john&quot;;
    proxy_set_header x-username &quot;john&quot;;
  
    location /_next {
      proxy_pass http://127.0.0.1:1323;
    }
  
    location = / {
      proxy_pass http://127.0.0.1:1323/john;
    }
  
    location / {
      proxy_pass http://127.0.0.1:1323/john$request_uri;
    }
  }
  </code></pre>
  <p>But I'm getting 404 issue on the domains. What's wrong with the current setup?</p>