How to Redirect to a New Domain with Netlify and NameCheap

Let’s say we have a site hosted on Netlify accessible through olddomain.com, which was bought through NameCheap.

Suppose we want to rebrand and move our domain to newdomain.com.

And we want the following:

1. Accessing newdomain.com will direct us to the Netlify site
2. Accessing olddomain.com will redirect us to newdomain.com
3. Google search results will slowly phase out olddomain.com and add newdomain.com

This article assumes our old domain is registered through NameCheap, connected to a Netlify app, and verified with Google Search Console.

1. Add new domain to Netlify

Netlify allows us to easily assign multiple domains to the same site. Naturally, we’ll need to include our new domain as a domain alias for our Netlify site.

First, navigate to your site’s Netlify Dashboard.

1. Navigate to Site settings → Domain management → Domains
2. Select Add domain alias
3. Type in your new domain: newdomain.com
4. Find your new domain and select Options → Set as primary domain
   1. Don’t worry! Your site will still be accessible via your old domain
5. Select Check DNS Configuration and then Set up Netlify DNS
6. Click through the wizard until you get to Active Netlify DNS with some nameservers (dns1.p07.nsone.net, dns2.p07.nsone.net, etc.)
7. Leave this page open, and open a new tab for the next section

2. Change NameCheap nameservers

Let’s head over to NameCheap.

1. Go to Account → Dashboard
2. Click Manage for the domain you’re using
3. Under NAMESERVERS, select Custom DNS
4. Paste in each nameserver, one-by-one from the Netlify
5. Save by clicking the check mark

3. Renew SSL certificate in Netlify

Let’s return to our site’s Netlify Dashboard to ensure SSL certificate coverage for all the domains.

1. Navigate to Site settings → Domain management → Domains
2. Under SSL/TLS certificate, select Renew certificate
3. Confirm certificate renewal in the modal

4. Set up redirect rules in Netlify site

We want to set up 301 permanent redirects for our site.

We can either set it up using the _redirects file or the Netlify configuration file, which is explained in the section below.

To properly set up redirects, we’ll need to:

1. Add redirect rules to either a _redirects file OR netlify.toml
2. Push changes to trigger another Netlify build
3. Test that each domain works as expected

If the redirect is not working, attempt to Clear cache and retry deploy.

4.1. Using _redirects

In our app, we’ll want to create a file named _redirects (no file extension) in the publish directory. How we write this file to the publish directory during the build depends on the type of app hosted.

_redirects will contain the following lines:

http://www.olddomain.com/*   https://newdomain.com/:splat 301!
https://www.olddomain.com/*  https://newdomain.com/:splat 301!
http://olddomain.com/*       https://newdomain.com/:splat 301!
https://olddomain.com/*      https://newdomain.com/:splat 301!

The first value is the source domain we’re redirecting from. The asterisk * is referred to as a splat, which indicates that everything after the trailing slash should redirect to the same resource on the new domain.

The second value is the destination domain we’re redirecting to. You might notice that :splat is a dynamic path that matches the * from the first domain.

The third value explicitly states that the redirect is a 301. The exclamation mark is an example of shadowing.

4.2. Using Netlify configuration file

The same configuration using netlify.toml can be found here.

[[redirects]]
  from = "http://www.olddomain.com/*"
  to = "https://newdomain.com/:splat"
  status = 301
  force = true
[[redirects]]
  from = "https://www.olddomain.com/*"
  to = "https://newdomain.com/:splat"
  status = 301
  force = true
[[redirects]]
  from = "http://olddomain.com/* "
  to = "https://newdomain.com/:splat"
  status = 301
  force = true
[[redirects]]
  from = "https://olddomain.com/* "
  to = "https://newdomain.com/:splat"
  status = 301
  force = true

5. Notify Google of domain change in Google Search Console

At this point, we assume you have the old domain registered properly with Google Search Console.

First, we’ll want to add a new property for our new domain.

1. Head to Google Search Console (GSC)
2. Select your list of properties and click Add property
3. Type in the new domain name
4. Verify DNS ownership
   1. Go to your site’s Netlify Dashboard
   2. Navigate to Site settings → Domain management → Domains
   3. Under Custom domains, find your newdomain.com
   4. Select Options → Go to DNS panel
   5. Select Add new record
   6. Add TXT, @, google-site-verification=*
5. Return to GSC and select Verify

Once this new domain is verified and registered with GSC, we can notify Google of the change of address.

1. Go to Settings → Change of address
2. We’ve already set up the 301 redirects in the previous section
3. Under Update Google, select the newly verified property (newdomain.com)
4. Select Validate & Update

6. Update sitemap.xml

Let’s also submit the sitemap of the new domain to Google Search Console property.

If you have sitemap, it will generally be under newdomain.com/sitemap.xml.

1. Head to Google Search Console (GSC)
2. Select the property associated with the new domain
3. Navigate to Index → Sitemaps
4. Under Add a new sitemap, enter in newdomain.com/sitemap.xml and select Submit

While we’re at it, let’s also request indexing for our new domain’s homepage.

1. Navigate to URL inspection
2. Type in newdomain.com
3. If available, select Request Indexing

7. Update URL in Google Analytics

It’s also a good idea to update the URL in Google Analytics.

1. Open your website’s Google Analytics
2. Select Admin → Property Settings
3. Update Default URL and Property Name if needed
4. Click Save