There's a Next.js site I'm working on and users can build their own profiles like in the URL pattern as below.

ourplatform.com/username
ourplatform.com/username/about
ourplatform.com/username/contact

But they can also connect their own domains to that profile page like theirdomain.com and in that domain I'd like to show the actual content as in ourplatform.com/username. So here's my Nginx configuration for the domains.

server {
  listen 80;
  server_name theirdomain.com;

  location ^~ /_next {
    proxy_pass http://127.0.0.1:1323;
  }

  location = / {
    proxy_pass http://127.0.0.1:1323/username;
  }

  location ~* /(.*) {
    proxy_pass http://127.0.0.1:1323/username/$1;
  }
}

So far I've succeeded to show their profiles in the domain they connect. But I'm having issues on the Next.js part.

This is an example code I'm using in Next.js. Getting all users from database to create static files. And passing their usernames to rendering component.

import Link from 'next/link'

export default ({ username }) => {
  return (
    <>
      <Link href={`/${username}/about`}>About</Link>
      <Link href={`/${username}/contact`}>Contact</Link>
    </>
  )
}

export async function getStaticPaths () {
  const users = await getUsersFromDatabaseHere()
  const paths = users.map(username => ({ params: { username } }))
  return { paths, fallback: true }
}

export async function getStaticProps ({ params }) {
  return {
    revalidate: 60,
    props: {
      username: JSON.parse(JSON.stringify(params.username))
    }
  }
}

This works great on the ourplatform.com/username but not on theirdomain.com.

When they enter the site over theirdomain.com links would be like (as expected):

theirdomain.com/username/about
theirdomain.com/username/contact

But it should be:

theirdomain.com/about
theirdomain.com/contact

Even though I've tried to use the links in this way in the domain, it seems like page is reloading when clicking a link so it's not what you expect from the <Link> component in Next.js.

<>
  <Link href='/about'>About</Link>
  <Link href='/contact'>Contact</Link>
</>

Now I have 2 questions.

1. How do I show different links in the href of <Link> component depending on the URL they're entering the site?
2. What should I do on Nginx side to prevent page's reloading issue when clicking a link?