Im trying to get my /archives to rewrite toarchives.localhost (localhost for now, ill change to actuall domain later) for now. Im trying to understand rewrites and I think I have a basic understanding of it. When I go to the main index page for the archives (src is located at app/(subdomain)/archives/page.tsx) it sucessfully reroutes to archives.localhost:3000/ and the page loads perfectly, but for some reason when I try to load archives.localhost:3000/test (src is located at app/(subdomain)/archives/test/page.tsx) I get a 404 error even though the page exists. What am I doing wrong?

/** @type {import('next').NextConfig} */
const nextConfig = {
    experimental: {
        missingSuspenseWithCSRBailout: false,
    },
    async rewrites() {
        return {
            beforeFiles: [
                // rewrite projects to the propper path, archievs.localhost/api included
                {
                    source: `/:path((?!auth|_next).)*`,
                    has: [
                        {
                            type: 'host',
                            value: 'archives.localhost/:path*',
                        },
                    ],
                    destination: '/archives/:path*',
                },
                {
                    // fallback
                    source: '/:path*',
                    destination: '/:path*',
                }
            ]
        }
    }
}

export default nextConfig;