URL Trailing Slashes
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:
The first step is to instruct your framework of choice as to whether or not you want trailing slashes on your URLs.
In your next.config.js, you must set the trailingSlash option to the desired value. The default for Next.js is to redirect URLs with trailing slashes to no trailing slashes.
As of Gatsby 4.7, Gatsby has a trailingSlash option 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.
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.
In order for the configuration settings above to work as advertised on Netlify, the framework's Netlify plugin must be installed.
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 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.
If you:
- are using Gatsby
- 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.
Click Enable asset optimization and you will see the following controls.
Uncheck all of the items so that it looks like the following image:
Then, click Disable asset optimization and press Save.
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.