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
- Create a
next.config.js
file is using Next.js or avercel.json
file like below. - Push your changes and redeploy your application.
1rewrites() {2 return {3 beforeFiles: [4 // if the host is `app.acme.com`,5 // this rewrite will be applied6 {7 source: '/:path*',8 has: [9 {10 type: 'host',11 value: 'app.acme.com',12 },13 ],14 destination: '/app/:path*',15 },16 ]17 }18}
An example rewrite object configuration inside next.config.js.. Only paths with app.acme.com will be rewritten.
1{2 "rewrites": [3 {4 "source": "/:path*",5 "has": [6 {7 "type": "host",8 "value": "app.acme.com"9 }10 ],11 "destination": "/app/:path*"12 }13 ]14}
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
.