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

Avatar for leerobLee RobinsonVP of Developer Experience
Guides/Domains & DNS
1 min read
Last updated March 16, 2023

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.

Was this helpful?

supported.