Netlify’s rewrite feature is incredibly useful for creating duplicate pages on my websites. By adding rules to the _redirects
file in the project’s public root, I can easily create different URLs for my content. However, I encountered a problem with trailing slashes that needed to be addressed.
To illustrate, let’s say I have several pages under the directory content/original
. I could use the following rewrite rule:
/copy/* /original/:splat 200
With this rule, accessing the URL /copy
would show the content stored in https://mysite.com/original
without changing the URL. This is because it’s not a redirect (despite the _redirects
file name), but a rewrite, as indicated by the 200
code at the end. If I had used 301
, it would have been a redirect.
The issue arose when I realized that there was no built-in way to automatically add a trailing slash to the URL. This led to problems when accessing /copy
and /copy/
because relative URLs for images and links would break, resulting in 404 errors.
I searched for a solution within my static site generator, hoping to find an alternative method for handling redirects. However, I ultimately opted for a client-side solution, which turned out to be simple yet effective.
To resolve the trailing slash problem, I added a JavaScript snippet at the bottom of my pages:
<script>
(function() {
if (!location.href.endsWith('/')) {
window.location = location.href + '/';
}
}())
</script>
Now, if a page is accessed without a trailing slash, the snippet automatically reloads the page with the slash appended at the end. The process is so fast that it’s almost imperceptible to the user.
Tags: Netlify, Rewrites, Trailing Slash, Static Site Generator