i want to make a redirection with subdomains.
basically if my url is sub.domain I should redirect to domain/sub
#subdomain redirect
buoyant marlin
loud cosmosBOT
Hi @buoyant marlin. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
To achieve a redirect from a subdomain (e.g., sub.domain.com) to a subpath on your apex domain (e.g., domain.com/sub), you can use Next.js rewrites with the has field in your next.config.js. This approach is officially documented and works both on Vercel and in self-hosted Next.js deployments.
Here’s how you can set it up in your next.config.js:
module.exports = {
async rewrites() {
return [
{
source: '/:path*',
has: [
{
type: 'host',
value: 'sub.domain.com',
},
],
destination: '/sub/:path*',
},
];
},
};
This configuration will rewrite all requests from sub.domain.com to domain.com/sub/:path*. For example, sub.domain.com/page will be served from domain.com/sub/page.
If you want an actual HTTP redirect (not just a rewrite), you can use the redirects field in next.config.js similarly.
For more details and examples, see the official Vercel guide: Can I redirect from a subdomain to a subpath?
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
buoyant marlin
@loud cosmos what if sub is dynamic ? how do I do it?
loud cosmosBOT
Let me check the knowledge base for you again. Give me one moment! :books:
If the subdomain is dynamic (e.g., {sub}.domain.com should redirect to domain.com/{sub}), you can use the has field with a regex value in your rewrite rule. However, based on the provided knowledge sources, there is no explicit example or documentation confirming that Next.js rewrites support capturing dynamic subdomains and injecting them into the destination path using the has field.
The closest documented approach is matching a specific subdomain (e.g., sub.domain.com), as shown in the official Vercel guide:
rewrites() {
return [
{
source: '/:path*',
has: [
{
type: 'host',
value: 'app.acme.com',
},
],
destination: '/app/:path*',
},
];
}
This works for a fixed subdomain, but the documentation does not show how to capture the dynamic part of the subdomain and use it in the destination path Can I redirect from a subdomain to a subpath?.
Therefore, based on the current knowledge sources, it is unclear if dynamic subdomain capturing and injection into the destination path is natively supported in Next.js rewrites or redirects. You may need to use custom middleware or an external proxy for this use case, but the knowledge sources do not provide a direct solution or example for dynamic subdomains.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
buoyant marlin
@loud cosmos does this work in localhost ?
loud cosmosBOT
Let me check the knowledge base for you again. Give me one moment! :books:
Based on the knowledge sources, handling subdomain-based rewrites or redirects on localhost is problematic in Next.js. Several issues have been reported where subdomains like sub.localhost:3000 are not parsed or handled correctly by Next.js middleware or routing logic. For example, requests to test.localhost:3000 are not distinguished from localhost:3000, and the expected subdomain is not available in NextRequest.nextUrl.host or hostname. This makes it difficult to test or implement subdomain logic locally Localhost domains are not parsed on middlewares.
Additionally, there are open issues where middleware redirects to a relative URL on localhost, even when an absolute URL is provided, leading to incorrect redirect behavior (e.g., redirecting to foobar.localhost:3000/signin instead of localhost:3000/signin) Middleware on localhost redirects to relative URL, even when provided with absolute one.