How to add redirects in gatsby with netlify | e Avni Tech

I was working on a gatsby project and i faced an issue how can i redirect URL in gatsby at netlify server. So here i am sharing the solution for handling multiple redirections in 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.

Originally published at https://eavnitech.com.

--

--

--

JavaScript lover

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

Recommended from Medium

The Children of Redux — Part 4: react-easy-state, Kea and state management with RxJS

How to iterate through a list of JSON response in Bash shell  (Bash/Linux/ZShell/Mac)

How to Create a Stack Using TypeScript

checkIfInteger()

How to hide information with an event listener — JavaScript

鬼灭之刃剧场版:无限列车篇 2020 (Demon Slayer: Kimetsu no Yaiba) 完整版本 HD/BluRay

Node.js: Top Trends You Should Watch in 2020

3W’s of React Hooks

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
eavnitech

eavnitech

JavaScript lover

More from Medium

Responsive Web Design, the Easy Way

Let’s get started with Algolia…

Why does my useEffect call twice in React 18?!

React Development