← Back to Guides

Can I redirect from a subdomain to a subpath?

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.

Configuring a Rewrite with '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?