I have this code that is

app/docs/[[...slug]]/page.tsx and basically it makes domain.com/docs/hi return hi I want to map it do docs.domain.com/docs/hi and return 404 on domain.com/docs/hi

type Params = Promise<{ slug: string[] }>

export async function generateMetadata({ params }: { params: Params }) {
  const { slug } = await params;
}

export default async function DocsPage({
  params,
}: {
  params: Params
}) {
  const { slug } = await params;
  const path = slug?.join('/') || '';
  return <div>Documentation for: {path}</div>;
}

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/docs/:slug*',
        has: [
          {
            type: 'host',
            value: 'docs.domain.com',
          },
        ],
        destination: '/docs/:slug*',
      },
    ];
  },

  compiler: {
    styledComponents: true,
  },

  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "www.roblox.com",
        port: "",
        pathname: "/headshot-thumbnail/image",
      },
      {
        protocol: "https",
        hostname: "cdn.discordapp.com",
        port: "",
        pathname: "/embed/avatars/**",
      },
      {
        protocol: "https",
        hostname: "cdn.discordapp.com",
        port: "",
        pathname: "/avatars/**",
      },
    ],
  },
};

export default nextConfig;

so this maps domain.com/docs/hi to docs.domain.com/docs/hi it works but domain.com/docs/hi also works and isnt 404