How to handle redirects with Netlify and React/Gatsby projects

Jonas K
2 min readMar 16, 2022

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

--

--