48
loading...
Setting up path redirects in GatsbyJS
🔔 This article was originally posted on my site, 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 has RewriteEngine,Nginx has rewrites, and so on!
This generally works as follows:
/path/a in their browser301 Moved Permanently, Location: /path/b header/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.
A bit of research revealed how Gatsby Cloud handles 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. 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, I'm one step ahead.
The code for this is super simple; check it out!
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 });
});
}exports.createPages = async ({ graphql, actions, reporter }) => {
...
await processRedirects({ actions, reporter });
};For example, here's a definition that redirects the
/tag path to /tags./tag /tagsI 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; I send one out every few weeks!
48