This article delves into the redirection process on Netlify for handling visits to old URLs. While there are multiple options available, we'll focus solely on this approach.

Managing Legacy URLs on Netlify

When your product has been around for a while, users will inevitably save some URLs to your pages in their files, and bookmarks, and Google will index some of these URLs. But what if there's a need to change a URL, perhaps because it's too long or for any other reason? What will happen then?

When a user visits a changed URL, they may encounter a Not Found page, resulting in potential traffic loss. However, there's a more effective solution. If the content remains the same but the URL is altered, redirecting the user to the new URL is preferable. Today, we'll explore how to accomplish this seamlessly using Netlify.

Why Redirections on Netlify?

Implementing redirection directly in the source code, such as with Gatsby or Next.js, requires ongoing maintenance and introduces the risk of bugs. However, platforms like Netlify offer server-side redirection, ensuring faster page loading times by handling requests at the server level.

Moreover, managing redirection at the infrastructure level is advantageous. Your application shouldn't be concerned with the hosting domain, as this can lead to complications when domains or URLs change. This is why Netlify is an optimal choice for this task.

Furthermore, Netlify allows for environment-specific configuration without the need for additional logic. This resembles the approach of configuring GitHub Actions using YAML files, providing a seamless and efficient solution.

How to redirect?

To redirect users from /articles/how-to-work-with-react/ to /articles/new/how-to-work-with-react on the production application using Netlify, follow these steps:

1. Within your application's static directory, create a file named _redirects.
2. Inside the _redirects file, add the old URL followed by a space and then the new URL. Separate each redirection rule by a new line.
3. Append 301 at the end of each redirection rule to specify a permanent redirection.

Here's an example of how the _redirects file would look:

// static/_redirects
/articles/how-to-work-with-react/ /articles/new/how-to-work-with-react 301
/articles/other/ /articles/new/other 301

With this setup, when users visit the old URL, they will be automatically redirected to the new URL, ensuring a seamless transition.

You can now push it to your GitHub repository. Moreover, you can generate this file dynamically based on scripts. For instance, if someone runs npm run start, an empty file is generated, or no file is generated at all. Conversely, if the command npm run build is executed, a file is generated based on articles in the database. This functionality can be tailored entirely to suit your requirements. At https://greenonsoftware.com/, we employ the following code to generate this file during a production build:

const fs = require('fs');

// Logic to fetch articles from the database or any other source
const articles = [
  { oldUrl: '/articles/how-to-work-with-react/', newUrl: '/articles/new/how-to-work-with-react' },
  // Add more articles as needed
];

// Generate the content for the _redirects file
const redirectsContent = articles.map(article => `${article.oldUrl} ${article.newUrl} 301`).join('\n');

// Write the content to the _redirects file
fs.writeFileSync('_redirects', redirectsContent);

When someone visits the legacy URL on the deployed site, depending on the environment or the script used to generate this file, the user will be redirected to other URLs.

Redirection record can also be added to the netlify.toml file. It's up to you to decide which option better suits your needs.

Summary

Achieving redirects is indeed straightforward with Netlify. You can create a proper _redirects file and populate it with the necessary content. Whether you generate it dynamically or keep it static depends on the scale of your application. If your app has a small number of URLs to maintain, a static file would suffice.