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.
- Create a
next.config.js
file is using Next.js or avercel.json
file like below. - 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*', }, ] }}
{ "rewrites": [ { "source": "/:path*", "has": [ { "type": "host", "value": "app.acme.com" } ], "destination": "/app/:path*" } ]}
When a request is made to app.acme.com
, then it will be rewritten to acme.com/app
.