How to add redirects in gatsby with netlify

I was working on a gatsby project and I faced an issue how can I redirect the URL in gatsby at netlify server. So here I am sharing the solution for handling multiple redirections on gatsby server side.

Configuration

For the configuration, you have to create a file netlify.toml at the root of your project

The netlify.toml file is your configuration file on how Netlify will build and deploy your site — including redirects, branch and context-specific settings, and much more. Its goal is to describe much of your site configuration via code

We can manage the redirects through the netlify.toml file, the structure of the file should be

[[redirects]]
  from = "the complete url of your blog page with domain like https://example.com/blog/blog-1"
  to = "the complete url of your blog page with domain like https://example.com/blog/blog-2"
  status = 301
  force = false
  query = {path = ":path"} #  apply this rule for /old-path?path=example
  conditions = {Language = ["en","es"], Country = ["US"]}

Here

• query is optional if you want to add on same patterns URL then you can use it
• conditions is optional if you want to add on same conditions then you can use it

If you want to use the proxy redirection then you can use this structure

[[redirects]]
  from = "/api/*"
  to = "Your proxy url"
  status = 200
  force = true
  conditions = {Role = ["admin", "cms"]}
  [redirects.headers]
    X-From = "Netlify"
    X-Api-Key = "some-api-key-string"

If you want to redirect on multiple URLs then please use the below structure

[[redirects]]
  from = "the complete URL of your blog page with a domain like https://example.com/blog/blog-1"
  to = "the complete URL of your blog page with a domain like https://example.com/blog/blog-2"
  status = 301
  force = true

[[redirects]]
  from = "the complete URL of your blog page with a domain like https://example.com/blog/blog-11"
  to = "the complete URL of your blog page with a domain like https://example.com/blog/blog-21"
  status = 301
  force = true

[[redirects]]
  from = "the complete URL of your blog page with a domain like https://example.com/blog/blog-12"
  to = "the complete URL of your blog page with a domain like https://example.com/blog/blog-22"
  status = 301
  force = true    

Redirects HTTP code

Here is the list of HTTP status codes, that are being used to send from server to the client or browser. The code gives information about the type of response.

You can specify the HTTP status code for any redirect rule but the default is 301.

• 301 (default): Permanent redirect. Tells the browser(client) that the address for this resource has permanently changed, and any indexes using the old address should start using the new one. The URL in the browser address bar will display the new address.
• 302: Temporary redirect. Tells the browser(client) that the current address change is temporary. The URL in the browser address bar will display the new address.
• 404: "Not found". You can use this status code to present custom 404 pages when visitors access paths on your site that don't exist. With this status code, the page content will change, but the URL in the browser address bar will not.
• 200: "OK". Redirects with this status code will change the server response without changing the URL in the browser address bar. This is used for rewrites and proxying.

With query parameter

If you want to redirect any specific URL like redirects all URL that starts with /store?id=my-blog-post to /blog/my-blog-post with a 301 redirect.

[[redirects]]
  from = "/store?id=my-blog-post"
  to = "/blog/my-blog-post"
  status = 301
  force = false
  query = {id = ":id"} 
  conditions = {Language = ["en","es"], Country = ["US"]}

With Splats

An asterisk indicates a splat that will match anything that follows it.
For eg

[[redirects]]
 from = "/blog/*"
 to = "/news/:splat"
 status = 301
 force = false

This would redirect paths like /blog/2004/01/10/test-1 to /news/2004/01/10/test-1.

With Placeholders

You can use placeholders in the origin and target paths:

[[redirects]]
 from = "/news/:year/:month/:date/:slug"
 to = "/blog/:year/:month/:date/:slug"
 status = 301
 force = false

This would redirect a URL like /news/2004/02/12/my-story to /blog/2004/02/12/my-story.