How I fixed the trailing slash in Netlify rewrites
Netlify has this great feature, rewrites, that allow me to create a number of duplicate pages. But there's a catch.
Netlify has this great feature that allows me to create a number of duplicate pages, by adding them into the _redirects
file in the public root of the project (public/_redirects
in Hugo, for example).
I use it to power some of my websites.
If I have a bunch of pages under content/original
, by writing:
/copy/* /original/:splat 200
I can call the URL
/copy
and when I access https://mysite.com/copy
I have the content stored inside https://mysite.com/original
, and the URL does not change. It’s not a redirect (despite the _redirects
file name), it’s a rewrite because I used the 200
code at the end. Had I used 301, that would have been a 301 redirect.
Anyway, the problem I stumbled upon is this: there’s no way to automatically add the trailing slash at the end, so if you access /copy
and /copy/
, and you use relative URLs for images and links, without trailing slash URLs will lead to 404 and images will be broken.
I looked for a solution in my static site generator, to see if it could replicate redirects in another way, but in the end my solution was client side.
And very simple.
I added this JavaScript snippet at the bottom of my pages:
<script>
(function() {
if (!location.href.endsWith('/')) {
window.location = location.href + '/'
}
}())
</script>
And the page now if there’s no trailing slash will immediately reload with the slash appended at the end.
The process is so quick it’s almost invisible to the user.
→ I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter
→ JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025