How to set up HTTP redirects on Vercel

Vercel is Spinal’s 2023 runner-up for static site hosting options. When crafting content, redirecting content to other URLs will happen.

This blog has a primer about HTTP redirects and how they can impact your SEO.

Setting these up with Vercel is easy, create a vercel.json if it doesn’t exists already. This where your projects configuration is stored for Vercel.

In here create a redirects key. Like the following example:

{
    "redirects": [
        {
            "source": "/cms-for-jekyll",
            "destination": "/cms-for-jekyll/",
            "permanent": true
        },
        {
            "source": "/subscribe/",
            "destination": "/newsletter/",
            "permanent": true
        },
        {
            "source": "/open/",
            "destination": "/not-open/",
            "permanent": true
        }
    ]
}

These entries are actual entries from Spinal’s site! Try some of them and see these URLS redirect you. Notice how some of these redirects are only concerned with appending a / to the URL. While the /subscribe/ page was the old URL and is now on the [/newsletter/](/newsletter/) URL.

Be aware that instead of the common 301 (temporary) and 302 (permanent) redirects, Vercel uses respectively 307 and 308 redirects. But you can replace the permanent: true key/value with "statusCode": 302.