When deploying applications on Vercel, one key feature that comes in handy is the ability to set up static redirects. Redirects are an essential aspect of web development because they allow you to manage URL changes, handle broken links, and ensure smooth navigation for users without disruption.

In this article, we will explore static redirects in Vercel, covering what they are, how to configure them, and best practices for using them in your Vercel deployments.

What Are Static Redirects?

Static redirects are predefined rules that instruct a web server to send users from one URL to another. Redirects can be used for several purposes:

Directing traffic from old URLs to new ones after a site restructure.
Redirecting from HTTP to HTTPS for better security.
Fixing outdated or broken links by routing users to the correct content.
Managing temporary or permanent moves of web pages.

With Vercel, you can easily configure static redirects through your vercel.json configuration file, ensuring efficient and smooth URL management for your website or web app.

Why Use Static Redirects?

SEO Benefits: Redirects help preserve search engine rankings and ensure that users land on the right pages after URL changes.
User Experience: Redirecting users from outdated or broken URLs to functional ones helps improve user experience.
Security: Enforcing HTTPS redirects improves the security of your site.
Prevent Link Rot: Prevent users from landing on 404 error pages by redirecting old URLs to new, updated ones.

Setting Up Static Redirects in Vercel

Step 1: Modify Your `vercel.json` File

Vercel uses the vercel.json configuration file to manage various deployment settings, including static redirects. You can define your redirects inside this file using the redirects key.

Here’s an example of how to set up a basic redirect in vercel.json:

{
  "redirects": [
    {
      "source": "/old-url",
      "destination": "/new-url",
      "permanent": true
    }
  ]
}

Explanation:

source: The original URL path you want to redirect.
destination: The URL path where you want to send the user.
permanent: A boolean value that determines if the redirect is permanent (true for 301) or temporary (false for 302).

Example 1: Redirect from HTTP to HTTPS

To ensure that users always access your site over HTTPS, you can set up a redirect like this:

{
  "redirects": [
    {
      "source": "http://yourdomain.com/:path*",
      "destination": "https://yourdomain.com/:path*",
      "permanent": true
    }
  ]
}

This will redirect all HTTP traffic to the HTTPS version of your site, helping improve security.

Example 2: Redirect All 404s to a Custom Page

Sometimes, you may want to redirect users who land on non-existent pages (404 errors) to a custom page. Here's how you can set it up:

{
  "redirects": [
    {
      "source": "/:path*",
      "destination": "/custom-404",
      "permanent": false,
      "statusCode": 404
    }
  ]
}

This setup will route all non-existent pages to a custom 404 page, improving the overall user experience.

Example 3: Redirect to an External URL

In some cases, you might want to redirect traffic to an external site. Here's how you can do that:

{
  "redirects": [
    {
      "source": "/blog",
      "destination": "https://external-blogsite.com",
      "permanent": true
    }
  ]
}

Step 2: Deploy to Vercel

Once you have configured your redirects in the vercel.json file, you can deploy your project to Vercel. The redirects will automatically take effect once your deployment is live.

To deploy, you can use the following command in your terminal:

vercel --prod

Once the deployment is complete, you can test your redirects by visiting the old URLs to verify that they properly redirect to the new destinations.

Best Practices for Using Static Redirects

1. Use Permanent Redirects When Necessary

When you are sure that a URL has permanently changed, use a permanent (301) redirect to let search engines know that the old URL should be replaced in their index. For temporary redirects, use a 302 status code.

2. Ensure Your Source and Destination URLs Are Correct

Double-check the paths in the source and destination fields to avoid broken or incorrect redirects.

3. Minimize Redirect Chains

Too many consecutive redirects (redirect chains) can lead to slower load times and poor SEO performance. Avoid chaining multiple redirects in succession.

4. Use Wildcards and Placeholders

Vercel supports wildcard and placeholder patterns, such as :path*, to apply redirects to multiple URLs at once. This can simplify your configuration and reduce redundancy.

For example, the following setup redirects all URLs in the /docs directory to the /documentation directory:

{
  "redirects": [
    {
      "source": "/docs/:path*",
      "destination": "/documentation/:path*",
      "permanent": true
    }
  ]
}

5. Monitor Your Redirects

Use analytics or monitoring tools to track how often your redirects are being triggered. This can give you insights into whether users are landing on outdated URLs frequently, which may indicate that your site needs updates or improved internal linking.

Conclusion

Static redirects are an essential tool in managing the flow of traffic across your website and improving both user experience and SEO. Vercel makes it simple to set up static redirects using the vercel.json configuration file. By following best practices such as minimizing redirect chains, using the correct status codes, and keeping an eye on your redirects, you can ensure smooth navigation for your users and seamless transitions as your site evolves.

If you’re deploying your application on Vercel, consider setting up static redirects to handle URL changes, manage broken links, and ensure the best possible experience for your users.

Static Redirects in Vercel