Remove trailing slash redirect for Gatsby + Gatsby Cloud + Netlify website

I’m building my Gatsby site via Gatsby Cloud and hosting it on Netlify.
The site url: https://imechyperspectral.netlify.app/en

Throughout my site I’m always using links without a trailing slash.
When you visit an url /en/page, Netlify will redirect to /en/page/ after which Gatsby will ones again remove the trailing slash. That behavior causes issues for page speed and SEO.

I’m using the remove trailing slashes plugin for Gatsby and on the gatsby cloud hosting everything behaves as expected.

I’ve tried deploying the site with and without the ‘Pretty URLs’ asset optimization option, but that doesn’t seem to have any effect.

Any idea’s on how I can tackle this issue?

2 Likes

When I’m building + deploying directly on Netlify the problem does not occur when I disable all asset optimizations.

This is a test site which builds with the same codebase, but directly on Netlify: https://blocks.netlify.app/en

Does Netlify CLI take the asset optimization configurations into account when creating new deploys? Or does it behave differently from a build created on Netlify directly?

Hey there, @dmerckx!

I’ve posted the same advice to your Helpdesk ticket but, for posterity, the best I can offer is this guidance.

Because everybody does it differently, it’s tricky to find a one size fits all solution. Although this is Nuxt, the same principles apply!

As for your follow-up RE: CLI, I’m unfortunately not the best person to ask. Hopefully one of my colleagues or a CLI :woman_mage: may be able to follow up else you’re always welcome to create an issue over on the CLI repo!

So basically the only current option is to start using trailing slashes across the website? The issue with that is that all historical links for my websites are written without trailing slashes, both internally and (more important) externally. So I feel that could have a very negative impact on SEO.

Any progress on the open feature request you mentioned? Can you link it here perhaps so I can follow up?

Hey Scott,

Thanks for your reply.
Is this a question you could forward to someone of your CLI team?

Because I feel it’s not so much a bug or feature request, but more a general question on how your CLI works with regards to asset optimizations (and in particular the whole trailing slash behaviour).

hey @dmerckx,

your best bet for CLI questions is actually to open an issue on this repo:

and the folks who work most closely with that code can take a look as time allows. thanks!

I finally got this working.

Thanks to these comments:

So something very weird is going on with the netlify UI.
The only way to skip the redirect is to ‘Disable asset optimization’ but also explicitly check all the boxes except for ‘Pretty URLs’:

Simply checking ‘Disable asset optimization’ without checking the other boxes does not work, the redirect still occurs.

The problem is unrelated to whether I build from Gatsby Cloud or Netlify directly.
I got all my sites working correctly as soon as I configured this.

3 Likes

Thanks for the follow-up! So glad to hear you got things working. We have some discussion around planning work to refactor that config widget to be a bit more obvious since as you note the effects of different checkbox configurations is downright confusing.

Unchecking all checkboxes seems to prevent pretty urls:

Checking “Disable asset optimization” at the top level visually appears to disable pretty URLs, but that is not the case.

Once this change has been made, I no longer receive a 301 to the trailing slash urls.

1 Like

This issue is still happening. It was driving me crazy, thanks. Your solution worked.

1 Like

If you want your website to not have any trailing slash and also work with Netlify you can use the gatsby-plugin-netlify and in gatsby-node.js add

const replacePath = path => (path === `/` ? path : path.replace(/\/$/, ``))

exports.onCreatePage = ({ page, actions }) => {
  const { createRedirect } = actions
  if(!page.path.includes('.html') && page.path !== '/') {
    createRedirect({ fromPath: `${page.path}/`, toPath: page.path, isPermanent: true })
  }
}

this will redirect all trailing slash to non-slash paths with 301 status code.
Note if you are also using createPages Gatsby node API you’ll need to add it there also

exports.createPages = async ({ actions, graphql }) => {
    const { createPage, createRedirect } = actions
       // ...
       pages.forEach(page => {
          // ...
          createRedirect({ fromPath: `${page.path}/`, toPath: page.path, isPermanent: true })
       })
    })
}
2 Likes

Thanks for sharing this, @Hazem3500! This will definitely be beneficial for future Forums members who encounter this :netliconfetti: