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 \# 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 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 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 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 $ curl i https //example com/shop