Good day. i have a Next.js site hosted on Vercel on link.example.com that i want to change to example.com/link.

1. I tried adding it as a domain on Vercel but it wasn't allowed.
2. From the documentation and some blogs, they tell me to create a vercel.json file on example.com repo and add the following

{
  "rewrites": [
    {
      "destination": "https://link.example.com/:path*",
      "source": "/links/:path*"
    },
    {
      "destination": "/",
      "source": "/(.*)"
    }
  ]
}

I did this but now, my site can be accessed seperately on both the subdomain and subdir which i don't want. I want it to be on only the subdir, cos i don't want duplicate content. I tried to do a permanent redirect from the subdomain to the subdir, but I think it went on a redirect loop and kept redirecting infinitely.

Then, all my styles and images were not showing on the subdir, so i tried using assestsPrefix in my next.config,js file

const isProd = process.env.NODE_ENV === "production";
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  assetPrefix: isProd ? "https://timonwa.com/links" : undefined,
};

module.exports = nextConfig;

This worked for the styles, but not the images. I have to prefix /links to all the image links.

before:

src="/img/my-image.jpg"
// or
src={image}

after:

src="/links/img/my-image.jpg"

Now the images are showing on the subdir but not on the subdomain.

I don't know what else to do again. I don't want duplicate websites and the images can only show on one website at a time.