Netlify + Nuxt - Remove trailing slash

[arekk]

I am generating static pages from nuxt on netlify. We have the structure of url without trailing slashes. For SSR we had trailingslash option set to false and custom redirect with redirect module. But for ‘nuxt generate’ option this is no longer working

I can’t seem to setup 301 redirects for url’s ending with trailing slash.

Eg.
https://example.com/blog - works
https://example.com/blog/ - throws 404

in nuxt.config we got

router: {
  trailingSlash: false
},

redirect: [{
  from: '^/(.*)/$',
  to: (from, req) => {
  let trailingUrl = req.url.endsWith('/') ? req.url.slice(0, -1) : req.url
  return trailingUrl
},
}],

All works on local server but not on netlify. Any ideas?

[miteyema]

You cannot use any server middleware when using nuxt generate.
So your redirect module is server middleware and will thus never be called.

You could use Netlify redirects instead: https://docs.netlify.com/routing/redirects

[arekk]

Ok thanks for the answer. The problem with _redirects is that you’re not allowed to use regex there - so imagine we got over 100 pages and we deploy multiple of them everyday . This way we will have to add manually every single redirection.

[Pie]

Hey @arekk,

I understand the frustration here and I can sympathise! There isn’t a clean and preferred way of achieving this. Every framework, person, will handle trailing slashes a little differently.

We have an open feature request for exactly this – allowing you to decide whether to opt in or out of trailing slashes – and I’ve added this conversation to the request list. Though, I can’t promise if/when this is delivered.

There are some methods of achieving this though they’re not very intelligent (such as this).

[kobekoto]

@miteyema & @arekk - According to the docs, you can’t use redirects to add or remove trailing slashes:

Redirect options

You’re better of using their pretty URL optimization feature.

I found this to be a super confusing issue, I personally banged my head against the wall trying to implement certain URLs on my site without trailing slashes for SEO purposes as well.

I did this by initially setting the Nuxt router settings to trailingSlash: false, but failed once I realized Netlify tends to add trailing slashes for a lot of URLs, so I regenerated my sitemap and routes, as well as links on the site to all have trailing slashes

TLDR: just use trailing slashes and Netlify’s pretty URL optimization feature, it’ll make your life a lot easier when you’re using Nuxt and Netlify.

[mornir]

TLDR: just use trailing slashes and Netlify’s pretty URL optimization feature, it’ll make your life a lot easier when you’re using Nuxt and Netlify.

Yeah, I came to the same conclusion: https://dev.to/mornir/nuxt-netlify-and-the-trailing-slash-3gge

However, the trailing slash option might be removed in Nuxt v3: https://github.com/nuxt/nuxt.js/pull/7776#issuecomment-664215752

[Govern0r]

Pretty annoying that Netlify imposes this limitation. Why aren’t we able to choose how our own site’s URLs are structured? There are SEO implications. I will have to go try other providers now. For anyone who gives in to Netlify’s limitations and just uses the slash URLs, make sure you also set your canonical tags to point to the slash variants as well.

Update: I just ran a deploy on Vercel (another provider similar to Netlify)… it turns out they do not impose this limitation! Moving my site over there now. Goodbye trailing slashes

[dmerckx]

Just to help other people out that stumbled on this.

I wrote down the solution (at least for me) here:

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

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’: [01-09-2020-10-24-16.png] 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 m…

[michaelhays]

Perfect, thanks! It took a few minutes for the changes to propagate, but it definitely worked. And yes, the asset optimization is quite a bizarre UX choice (mistake?).

@Pie, +1 for the option to remove trailing slashes. Is there a place we can vote on potential features?

[Pie]

Great stuff!

We’ve got trailing slash issues files behind-the-scenes but a public facing topic over on our Features category wouldn’t be a bad idea!