I own a domain, let’s call it, myname.com. It’s my porfolio site that I built with react. Now, I have created subdomain called projects.myname.com where I would like to host my react and Next.js projects. I have configured all the DNS and redirect stuff. It’s all working fine and as I have set up. But the issue is when someone types projects.myname.com/projectname they get redirected to the the netlify subdomain (project-name.netlify.app) where the project is actually hosted. I don’t want that. I would like the project to be hosted on and be visible on projects.myname.com/projectname. I don’t want the user to see the netlify url anywhere. How can I do that?

Following is the code of my serverless netlify function and netlify.toml:

• Serverless Function

exports.handler = async (event, context) => {
  const { path } = event;
  const lowerCasePath = path.toLowerCase();

  const redirects = {
    "/project1": "https://project1.netlify.app",
    "/prject2": "https://project2.netlify.app",

  };

  // Check for exact matches first
  if (redirects[lowerCasePath]) {
    return {
      statusCode: 301,
      headers: {
        Location: `${redirects[lowerCasePath]}${path.slice(
          lowerCasePath.length
        )}`,
      },
    };
  }

  // Handle case-insensitive routing for general paths
  const normalizedPath = Object.keys(redirects).find((key) =>
    lowerCasePath.startsWith(key)
  );
  if (normalizedPath) {
    return {
      statusCode: 301,
      headers: {
        Location: `https://projects.myname.com${path}`,
      },
    };
  }

  return { statusCode: 404, body: "Not Found" };
};

• Netlify.toml:

[build]
  functions = "netlify/functions"

[[redirects]]
  from = "/*"
  to = "/.netlify/functions/caseInsensitiveRedirect"
  status = 200
  force = true

I have tried changing the redirect stuff but I am quite new to this and so I am not sure what to do or how to proceed.