Setting up path redirects in GatsbyJS
Tags: redirect, gatsby, netlify, seo
Published: 2021-07-23 23:06:06

---
title: Setting up path redirects in GatsbyJS
published: true
date: 2021-07-23 00:00:00 UTC
tags: Redirect,GatsbyJS,Netlify,SEO
series: Building a developer blog with GatsbyJS
canonical_url: https://MihaiBojin.com/personal-site/path-redirects-in-gatsbyjs
---

![Photo: Birds flying someplace else](https://MihaiBojin.com/static/1a4298d9307d1f24ed1817194e8cc83f/4968a/julian-hochgesang--CQdrCZ9LRY-unsplash.jpg)<figcaption>"Photo by <a href="https://unsplash.com/@julianhochgesang?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Julian Hochgesang</a> on <a href="https://unsplash.com/s/photos/move?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a>"</figcaption>

🔔 This article was originally posted on my site, [MihaiBojin.com](https://MihaiBojin.com/personal-site/path-redirects-in-gatsbyjs?utm_source=external&utm_medium=organic&utm_campaign=rss "MihaiBojin.com"). 🔔

* * *

It comes a time in any site's life to reorganize content for better SEO rating.

When that happens, you will need to redirect old paths to new ones. For regular sites, you can easily define any necessary redirects. For example, [Apache](https://httpd.apache.org/) has [RewriteEngine](https://httpd.apache.org/docs/2.4/rewrite/remapping.html),[Nginx](https://www.nginx.com/) has [rewrite](https://www.nginx.com/blog/creating-nginx-rewrite-rules/)s, and so on!

This generally works as follows:

- the user requests `/path/a` in their browser
- the responding webserver checks its redirect table and determines the content has moved
- it then responds with a `301 Moved Permanently`, `Location: /path/b` header
- informing the user's browser to load `/path/b`

* * *

For statically generated sites like Gatsby, achieving this flow isn't so straightforward. First, all that Gatsby does is generate HTML. Second, the webserver (not the HTML) handles [Response headers](https://developer.mozilla.org/en-US/docs/Glossary/Response_header).

A bit of research revealed [how Gatsby Cloud handles redirects](https://support.gatsbyjs.com/hc/en-us/articles/1500003051241-Working-with-Redirects).

This approach works but requires you to define all redirect rules in `gatsby-node.js` as javascript. It felt like a code smell to me...

A bit more research later, I found [how Netlify handles redirects](https://docs.netlify.com/routing/redirects/). The prospect of listing my redirect rules in a text file seemed more appropriate. As an added benefit, if I ever decide to move my site from Gatsby Cloud to [Netlify](https://www.netlify.com/), I'm one step ahead.

The code for this is super simple; check it out!

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#1-generate-redirects-from-a-text-file)1. Generate redirects from a text file

```
async function processRedirects({ actions, reporter }) {
  const lineReader = readline.createInterface({
    // using the same file name as Netlify
    input: fs.createReadStream('_redirects'),
  });

  const { createRedirect } = actions;

  // process every line and define the path redirect
  lineReader.on('line', (line) => {
    const [fromPath, toPath] = line.split(/\s+/);
    console.log(`Redirecting ${fromPath} to ${toPath}`);
    createRedirect({ fromPath, toPath });
  });
}
```

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#2-call-the-logic-in-gatsby-nodejs)2. Call the logic in gatsby-node.js

```
exports.createPages = async ({ graphql, actions, reporter }) => {
  ...
  await processRedirects({ actions, reporter });
};
```

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#3-define-all-redirect-rules)3. Define all redirect rules

For example, here's a definition that redirects the `/tag` path to `/tags`.

```
/tag /tags
```

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#thats-all-she-wrote-folks)That's all she wrote, folks.

I don't have much else left to say here. I hope you find this little tutorial useful!

* * *

If you liked this article and want to read more like it, [please subscribe to my newsletter](https://motivated-founder-807.ck.page/db1cf284bf "newsletter link"); I send one out every few weeks!