How I fixed the trailing slash in Netlify rewrites
New Course Coming Soon:
Get Really Good at Git
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.
Here is how can I help you:
- COURSES where I teach everything I know
- THE VALLEY OF CODE your web development manual
- BOOTCAMP 2024 cohort in progress, next edition in 2025
- BOOKS 16 coding ebooks you can download for free on JS Python C PHP and lots more
- SOLO LAB everything I know about running a lifestyle business as a solopreneur
- Interesting links collection
- Follow me on X