How to handle redirects with Netlify and React/Gatsby projects

So I have this project, which has been using the same domain since I started a couple of years ago.

But as time goes by, I realized that there were better, more matching domains available, which included the keyword as well.

In my case, the project is running on Netlify. I had a thought, that it was just some kind of domain alias setup and the job is done. But there is a bit more to do.

So let me show you how I made it work

At the root of your Netlify, you can see Domains at the top.

Click Add or register domain

It is required that your domains are registered on Netlify DNS, so if not, copy Netlify’s nameservers and place replace them on your current domain name server. This guide has not included a guide for this.

When it is registered on Netlify, go to the project that is gonna use this new domain.

Go to Domain settings in that project and add the new domain as Domain alias

Remember to renew your SSL certificate, when domain alias is added, so your new domain is also running HTTPS.

Now you’re done on Netlify. Now open your Gatsby project.

I can understand, that some have the static folder by default and some haven’t. I can’t tell what's the difference.

But if you like me, did NOT have the static folder —

create a folder called static at the root of your Gatsby project.

Inside this static folder, create a file called _redirects

This is where you are writing all the redirects rules.

# Left domain is redirecting to the domain on the right side
# Remember to add with and without www
https://this-domain.com/ https://is-redirecting-to-me.com/ 301https://www.this-domain.com/ https://www.is-redirecting-to-me.com/ 301

That’s it.

When you deploy this, and you’ve done things right on Netlify — you should now be redirected with 301 on domains above.

I hope you found this article useful

--

--

--

Building stuff on the world wide web. Hi👋

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

S1C3.2 : Let it fetch

Completing 30 vanilla JS projects in 30 days — Part 3

Dreams Catcher, a Javascript application

NextJS and Core Web Vitals in 2021

If you run in nextJs in Dev

10 Javascript Interview Questions and Answers

7 Phrases Senior Programmers Shy Away from Telling Their Juniors

React.js Simple Overview

Difference between map() and forEach()

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jonas K

Jonas K

Building stuff on the world wide web. Hi👋

More from Medium

How We Created 36 Unique WebGL Demos in 36 Days

An intro to Contentful CMS

NextJs SEO Checklist: The Ultimate Roadmap To A Fast, SEO-ready Website

How to Render WPBakery Element Shortcodes in GraphQL