Can I redirect from a subdomain to a subpath?

Learn how to redirect from your subdomain to a subpath on Vercel with a vercel.json file or with Next.js
Last updated on March 16, 2023
Domains & DNS

Vercel (and Next.js) both offer the ability to add Redirects and Rewrites to your application. This approach is commonly used for subpaths. For example, adding a redirect from acme.com/old to acme.com/new.

If you want to rewrite app.acme.com to acme.com/app, you'll need to configure a rewrite making use of the has field.

  1. Create a next.config.js file is using Next.js or a vercel.json file like below.
  2. Push your changes and redeploy your application.
rewrites() {
return {
beforeFiles: [
// if the host is `app.acme.com`,
// this rewrite will be applied
{
source: '/:path*',
has: [
{
type: 'host',
value: 'app.acme.com',
},
],
destination: '/app/:path*',
},
]
}
}
An example rewrite object configuration inside next.config.js.. Only paths with app.acme.com will be rewritten.
{
"rewrites": [
{
"source": "/:path*",
"has": [
{
"type": "host",
"value": "app.acme.com"
}
],
"destination": "/app/:path*"
}
]
}
An example rewrite object configuration inside vercel.json.

When a request is made to app.acme.com, then it will be rewritten to acme.com/app.

Couldn't find the guide you need?