website logo
Navigate through spaces
⌘K
OVERVIEW
ORDER MANAGEMENT (OMS)
SHIPPING - SETUP
Shipping Methods
Shipping Zones
Shipping Method Setup Examples
TAXES - Setup
Tax Automation with Stripe Tax
Tax Automation with Avalara
CONTENT MANAGEMENT (CMS)
DATA
CUSTOMER LIFETIME REVENUE
Customer Lifetime Revenue Explanation
Customer Lifetime Revenue and Purchase Likelihood
Recency Frequency and Monetary
CLR and RFM Data Table Glossary
RFM and CLR in the Hub
LOOKER
Modifying a Dashboard
Timestamp differences between Looker, OMS and Shopify
How to create custom calculations in Looker
Looker and Shopify data models
Custom fields
How to 'Save and Schedule' reports
Creating Custom Reports or Look
Looks vs Dashboards
Login Looker FAQ
Looker Glossary
SEGMENT EVENT TRACKING
What are event tracking
Adding Tracking
What is the Tracking Plan?
The Chord Tracking Plan
The Shopify Tracking Plan
Event Tracking FAQ
EVENT UPDATES PAGE
Email Subscription Payment Event Update
Product Feed Setup
Getting Segment to Production
Consent Management
Installing in Next.js
Installing in Gatsby
Integrations
👩‍💻Developer Tools
Using Chord with Shopify
Docs powered by archbee 

URL Trailing Slashes

12min

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 to the desired value. The default for Next.js is to redirect URLs with trailing slashes to no trailing slashes.

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


Gatsby

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.

JS
|
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
  • Gatsby Netlify plugin

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.

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.

Document image


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

Document image


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

Document image


Then, click Disable asset optimization and press Save.

Document image


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.

Text
|
$ curl -I https://example.com/shop




Updated 03 Mar 2023
Did this page help you?
Yes
No
PREVIOUS
npm Access for @chordcommerce Packages
NEXT
Content Management (Shopify version)
Docs powered by archbee 
TABLE OF CONTENTS
Framework Setup
Next.js
Gatsby
Hosting Setup
Plugin Installation
Gatsby Without Trailing Slashes