---
title: URL Trailing Slashes
slug: oms/url-trailing-slashes
docTags: 
createdAt: 2022-07-27T19:26:17.000Z
---

 If you are coming to Chord with an existing site, you may have established conventions when it comes to trailing slashes on the end of your URLs. You should keep those conventions intact as switching can have a serious impact on SEO ranking. This guide is to show you how to setup Chord's frameworks and hosting to accommodate your trailing slash requirements.

For the purposes of this guide, we will have the following naming conventions:

```Text
# Trailing slash
https://example.com/shop/
# No trailing slash
https://example.com/shop
```

## Framework Setup

The first step is to instruct your framework of choice as to whether or not you want trailing slashes on your URLs.

### Next.js

In your `next.config.js`, you must set the [`trailingSlash option`](https://nextjs.org/docs/api-reference/next.config.js/trailing-slash) to the desired value. The default for Next.js is to redirect URLs with trailing slashes to no trailing slashes.

```javascript
module.exports = {
  // Set to true if you want trailing slashes
  trailingSlash: false,
}
```

### Gatsby

As of Gatsby 4.7, Gatsby has a [`trailingSlash option`](https://www.gatsbyjs.com/docs/reference/config-files/gatsby-config/#trailingslash) available in your `gatsby-config.js`. For Gatsby v4, the default for this is `legacy`, which preserves what URL was provided. In Gatsby v5, the default for this is `always`, which will redirect all URLs to ones with trailing slashes.

```javascript
module.exports = {
  // Set to 'always' if you want trailing slashes
  trailingSlash: 'never',
}
```

## Hosting Setup

We use Netlify as the default hosting method at Chord. If you are using another hosting provider, please contact support if you would like help setting up the correct trailing slashes mode for your hosting.

### Plugin Installation

In order for the configuration settings above to work as advertised on Netlify, the framework's Netlify plugin must be installed.

- [Next.js Netlify plugin](https://github.com/netlify/netlify-plugin-nextjs)
- [Gatsby Netlify plugin](https://www.npmjs.com/package/@netlify/plugin-gatsby)

There are multiple ways to install these plugins, including with `npm`/`yarn`, using `netlify.toml` in the root of your repository, or manually in the Netlify UI. We'll leave it up to you to pick the method that works best for you, though we favor `npm`/`yarn` and/or using `netlify.toml`. Further installation instructions can be found in the links above.

Additionally, for Gatsby, you must install [`gatsby-plugin-netlify`](https://www.gatsbyjs.com/plugins/gatsby-plugin-netlify/) and add it to your `gatsby-config.js` so that Gatsby can generate Netlify specific artifacts as a part of its build. This plugin is included by default in our starters; you should just check that it's there and add it if not.

If you are using Next.js or Gatsby with trailing slashes, you should be good to go now. If you are using Gatsby and don't want trailing slashes, the next section details how to do that.

### Gatsby Without Trailing Slashes

If you:

1. are using Gatsby
2. do not want trailing slashes on your URLs

these are instructions for you.

When Gatsby builds a site, it generates all the pages as `index.html` files living inside of a folder that matches the request path. Using the above example of `https://example.com/shop`, that page actually exists in the filesystem as `/shop/index.html`. For legacy web reasons, `index.html` has a special meaning to web servers that, when requesting a directory, return the `index.html` file when `/shop/` is requested. All this to say that Netlify is able to do trailing slashes out of the box because of how web servers work.

In order to make no trailing slashes work, we need to change how Netlify does URL rewriting using the Netlify UI. Head to your site in Netlify and open **Site Settings > Build & deploy > Post Processing**. There, you will find a section titled **Asset optimization**. Click **Edit settings** and you will see the following form.

![](https://api.archbee.com/api/optimize/TmutqdeXiIw-V3gBZXVjd/gv_0KampsJxscDBdHCoca_image.png)

Click **Enable asset optimization** and you will see the following controls.

![](https://api.archbee.com/api/optimize/TmutqdeXiIw-V3gBZXVjd/xsxrO0XC2LtXELlXQuseQ_image.png)

Uncheck all of the items so that it looks like the following image:

![](https://api.archbee.com/api/optimize/TmutqdeXiIw-V3gBZXVjd/Je4uQ_RmGdD96ZkhOARx5_image.png)

Then, click **Disable asset optimization** and press **Save**.

![](https://api.archbee.com/api/optimize/TmutqdeXiIw-V3gBZXVjd/q2ivltfBIsqn1wrvFaIu0_image.png)

After this, redeploy your site and you should see that visiting a URL without trailing slashes should not generate any redirects in the network console, nor should the URL show a trailing slash at any point during a normal page load. We know that the instructions above don't seem to do anything, but if you don't do them, you'll add an extra 200ms to 1s to each page load.

To completely verify that the desired behavior will occur for your users, run the following command and ensure that a `200 Ok` response is returned instead of a `301`.

```bash
$ curl -I https://example.com/shop
```