How to fix trailing slash issues in Netlify rewrites

Why trailing slashes can break things on Netlify

Netlify rewrites are a powerful feature. They let you show the same content under multiple URLs without changing the address in the browser. This is extremely useful for creating duplicate pages, aliases, or alternative paths.

However, there is a small detail that can cause big headaches: trailing slashes.

If you are not careful, visiting /page and /page/ can behave very differently. And if your site uses relative URLs for images or links, this difference can easily lead to broken assets and 404 errors.

This article explains the problem and shows a simple, practical fix that works well on Netlify.

Using Netlify rewrites to duplicate pages

Netlify rewrites are defined in the _redirects file, usually located in the public root of your project.

For example, with this rule:

/copy/* /original/:splat 200

You can visit:

https://mysite.com/copy

And Netlify will serve the content from:

https://mysite.com/original

The important part here is the 200 status code. This tells Netlify to rewrite the request, not redirect it. The URL in the browser stays the same.

This is very useful, and it works exactly as expected.

The trailing slash problem

The issue appears when you access the rewritten page without a trailing slash.

For example:

• /copy
• /copy/

Both URLs work, but they are not treated the same by the browser.

If your HTML uses relative paths for images or links, accessing /copy without the trailing slash can cause those paths to resolve incorrectly. The result is broken images or links that lead to 404 pages.

Unfortunately, Netlify rewrites do not provide a built-in way to force a trailing slash when using a rewrite instead of a redirect.

Why redirects are not an option here

You might think about solving this with a redirect, but that changes the behavior.

If you used a 301 or 302 instead of 200, Netlify would redirect the user and change the URL. In this case, that is not what we want. The whole point of the rewrite is to keep the original URL visible.

So the solution needs to happen somewhere else.

A simple client-side fix

After trying to solve this at the static site generator level, the simplest and most reliable fix turned out to be client side.

The idea is very straightforward:

• Check if the current URL ends with a slash
• If it does not, reload the page with a slash appended

Here is the small JavaScript snippet that does exactly that:

<script>
  (function () {
    if (!window.location.pathname.endsWith("/")) {
      window.location.href = window.location.pathname + "/"
    }
  })()
</script>

You can place this at the bottom of your page layout so it runs as soon as the page loads.

Why this works well on Netlify

This redirect happens entirely in the browser. Netlify serves the page, the script runs, and the browser immediately reloads the correct URL.

The redirect is so fast that users usually do not notice it at all. More importantly, once the trailing slash is in place, all relative URLs behave correctly.

This approach keeps:

• Your Netlify rewrite intact
• Your URLs consistent
• Your images and links working

Things to keep in mind

A few small notes:

• This only affects users who visit the non-slash version
• Search engines will see the final slash URL after reload
• It works well for static sites hosted on Netlify
• It avoids complex redirect rules or build-time hacks

For many projects, this is a good tradeoff between simplicity and correctness.

Conclusion

Trailing slashes can be surprisingly tricky when using Netlify rewrites. Because rewrites do not change the URL, relative paths can easily break when the slash is missing.

A small client-side check is often the easiest fix:

• Detect missing trailing slashes
• Reload the page with the correct URL
• Keep your Netlify rewrites working as intended

If you rely on Netlify rewrites to duplicate pages, this simple solution can save you a lot of debugging time and prevent broken pages in production.