TL;DR

To set up URL redirects in your Astro project on Vercel, add a redirect rule in the vercel.json configuration file. This guide covers how to do it step-by-step.

Introduction

If you’re building a website using Astro, a modern static site generator, and deploying it on Vercel, you may need to configure URL redirects. Redirects help you manage traffic between different URLs, ensure SEO-friendly site architecture, and improve user experience.

In this post, I’ll show you how to configure simple URL redirects in your Astro project deployed to Vercel. Whether you’re moving content to new URLs, managing old paths, or ensuring smooth redirects for SEO, Vercel provides an easy way to set them up.

Why Use Redirects?

Redirects are an essential part of web development, especially when you need to:

  • Move content to a new location without breaking links.
  • Keep old URLs working while updating your site structure.
  • Ensure that search engines index the correct URL to improve SEO.

When deploying static sites with Astro, managing redirects through Vercel ensures that requests for old URLs are automatically sent to new ones without requiring custom server-side logic.

Step-by-Step Guide

Here’s how to set up URL redirects in your Astro project on Vercel, step by step.

1. Add a vercel.json File

The key to setting up redirects on Vercel is the vercel.json file. This configuration file needs to be created at the root of your Astro project. It allows you to specify how Vercel should handle routing, including URL redirects.

Here’s a basic example of how to define a redirect rule:

{
  "redirects": [
    {
      "source": "/old-path",
      "destination": "https://example.com/new-path",
      "permanent": true
    }
  ]
}

Explanation:

  • "source": The old URL path you want to redirect from.
  • "destination": The new URL path you want to redirect users to.
  • "permanent": A boolean value indicating whether this is a permanent (301) redirect or temporary (302). A permanent redirect is recommended for long-term URL changes.

2. Deploy to Vercel

Once your vercel.json file is in place with the necessary redirects, deploy your Astro project to Vercel. Vercel automatically detects the vercel.json file during deployment and applies the redirect rules.

If you’re using GitHub, GitLab, or another Vercel integration, simply push your changes, and Vercel will take care of the rest.

3. Test the Redirects

After deployment is live, you can test the redirects by visiting the old URL in your browser. If everything is configured correctly, you should be redirected to the new URL.

Alternatively, you can use an online tool like WebSniffer to test your redirects more easily. To do this:

  1. Go to WebSniffer.
  2. Place the full URL of your source path (e.g., https://example.com/old-path) into the input field.
  3. Submit the form.

WebSniffer will show you the HTTP response header, including the Location header, which will indicate the destination URL of the redirect. This is a quick way to confirm that the redirect is functioning as expected.

Why Use Vercel’s Redirects for Astro Projects?

Vercel makes it simple to manage redirects for static sites built with frameworks like Astro. By using the vercel.json file, you can:

  • Avoid complex server-side configurations.
  • Benefit from Vercel’s fast and reliable global CDN, ensuring quick redirects.
  • Protect your SEO rankings by ensuring search engines follow your redirects.

Conclusion

Configuring URL redirects in your Astro project on Vercel is a straightforward process that ensures your site structure remains intact, your users are redirected to the right pages, and your SEO efforts are protected. By leveraging the power of Vercel’s vercel.json configuration file, you can easily manage redirects and improve your site’s navigation without extra hassle.