How do I perform Vercel redirects based on query strings?

When using redirects with the `vercel.json` or `next.config.js` configuration file, your URL may contain query parameters that you would like to use in your re-direction, this is possible with 2 different methods.
Last updated on May 8, 2024
Build, Deployment & Git

When using redirects with the vercel.json or next.config.js configuration file, your URL may contain query string parameters that you would like to use in your redirection. This article explains the two methods possible to achieve this.

By default, all query strings that are found in the source path will be passed to the destination path. In the example configuration below, if the source is /?baz=10, the destination will be /lol/?path=foo&baz=10.

{
"redirects":[
{
"source":"/",
"destination":"/lol/?path=foo"
}
]
}
A redirect configuration with query strings in the source.

Using the has property, you can redirect to a specific route based on the value of the query parameter being present. For example, in the configuration below, if the source is /specific/mypath?page=home&id=1000, it will be redirected to /another/mypath?page=home&id=1000.

{
"redirects": [
{
"source": "/specific/:path*",
"has": [
{
"type": "query",
"key": "page",
"value": "home"
}
],
"permanent": false,
"destination": "/another/:path*"
}
]
}
A redirect configuration using the has property.

For details related to using the has field, review this page for next.config.js and this page for vercel.json.

Couldn't find the guide you need?