How to add redirects in gatsby with netlify
Tags: gatsby, netlify, react
Published: 2021-03-22 09:35:57

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

```markdown
[[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

```markdown
[[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
```markdown
[[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.
```markdown
[[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

```markdown
[[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:

```markdown
[[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`.