404 error after adding trailingSlash: false in a docusaurus website

[chengtie]

(* stackoverflow: https://stackoverflow.com/questions/75442550 *)

I have a website made by docusaurus 2.0.0-beta.18. I realize that, in production, when I click on items in the sidebar, it first goes to https://www.mywebsite.com/docs/a-page. If I reload the page, the url becomes https://www.mywebsite.com/docs/a-page/. This problem does not exist in localhost.

I think a url should be consistent before and after reloading. And like StackOverflow, a good style is not having / in the end. I searched issues of Docusaurus and it seems that trailingSlash would be the solution. So I added trailingSlash: false in docusaurus.config.js.

Then, I deployed this change to my production server with docker and nginx. But loading most of the pages of the website returned a 404 error, while static contents could be loaded. Reloading nginx or recreating docker containers did not help.

By contrast, setting trailingSlash: true returns well the website. And it works well: clicking on items in the sidebar goes to https://www.mywebsite.com/docs/a-page/ ended with /.

So does anyone know why trailingSlash: false makes the website return 404 error?

PS: docusaurus.config.js:

const path = require('path');
module.exports = {
  title: 'my website',
  tagline: 'The tagline of my site',
  onBrokenLinks: 'ignore',
  url: 'https://www.mywebsite.com',
  baseUrl: '/', // if we use GitHub Pages, we need to set this to '/docusaurus/', and also change routing links in some pages
  favicon: 'img/favicon.ico',
  organizationName: 'softtimur', // Usually your GitHub org/user name.
  projectName: 'docusaurus', // Usually your repo name.
  trailingSlash: false,
  plugins: [
    path.resolve(__dirname, './plugins/monaco-loader'),
  ],
  themeConfig: {
    navbar: {
      title: 'my website',
      logo: {
        alt: 'My Site Logo',
        src: 'img/logo.svg',
      },
      items: [
        {
          label: 'Documentation', position: 'left',
          items: [
            { label: 'Introduction', to: 'docs/introduction' },
            { label: 'Getting Started', to: 'docs/try-samples' }
          ]
        },
        { to: 'demo', label: 'Live Demo', position: 'left' }, // to src/pages/demo.js
        {
          label: 'Persons', position: 'left',
          items: [
            { label: 'Get my website', to: 'docs/consumer-buy' },
            { label: 'Follow Free Videos and Contents', to: 'docs/free-videos' },
            { label: 'Request a Help', to: 'docs/help-your-work' }
          ]
        },
        {
          label: 'Businesses', position: 'left',
          items: [
            { label: 'Get my website Together', to: 'docs/group-buy' },
            { label: 'Other Services', to: 'docs/web-development' }
          ]
        },
        {
          label: 'Language and Programming', position: 'left',
          items: [
            { label: 'Course in English', to: 'https://go.mywebsite.com/RJ2HPz' },
            { label: 'Course in Chinese', to: 'https://go.mywebsite.com/2KjQzL' },
          ]
        }
        ,
        {
          to: '#',
          position: 'right',
        },
        {
          to: '/logout',
          label: 'Sign Out',
          position: 'right',
        },
        {
          to: '/login',
          label: 'Sign In',
          position: 'right',
        },
        {
          type: 'localeDropdown',
          position: 'right',
        },

      ],
    },
    footer: {
      style: 'dark',
      links: [
        {
          title: 'Documentation',
          items: [
            {
              label: 'Try samples',
              to: 'docs/try-samples',
            },
            {
              label: 'Installation',
              to: 'docs/installation',
            }
          ],
        },
        {
          title: 'Philosophy and Research',
          items: [
            {
              label: 'Fundamentals',
              to: 'docs/fundamentals'
            },
          ],
        },
        {
          title: 'Community',
          items: [
            {
              label: 'LinkedIn',
              href: 'https://www.linkedin.com/in/softtimur/'
            }
          ],
        },
        {
          title: 'Company',
          items: [
            {
              label: 'About Us',
              to: 'docs/about-us'
            },
            {
              label: '❤ We are hiring!',
              to: 'docs/hiring'
            }
          ],
        }
      ],
    },
  },
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        googleAnalytics: {
          trackingID: 'UA-68622074-6',
        },
        docs: {
          sidebarPath: require.resolve('./sidebars.js'),
        },
        theme: {
          customCss: require.resolve('./src/css/custom.css'),
        },
        sitemap: {
          changefreq: 'weekly',
          priority: 0.5,
        },
      },
    ],
  ],
  scripts : [
    '/js/patch.js'
  ],
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'zh-CN'],  // Add 'zh-CN' here
    localeConfigs: {
      en: {
        label: 'English',
        htmlLang: 'en-GB',
      },
      'zh-CN': {   // Add this section for Simplified Chinese
        label: '简体中文',
        htmlLang: 'zh-Hans',
      },
    },
  }
};

nginx configuration:

gzip on;
gzip_proxied any;
gzip_disable "msie6";
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_min_length 256;
gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/rss+xml text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype image/jpeg image/png image/svg+xml image/x-icon;


server {
  listen  3002;
  absolute_redirect off;
  root  /app;

  location = / {
    rewrite ^(.*)$ https://$http_host/docs/introduction redirect;
  }

  location = /docs {
    rewrite ^(.*)$ https://$http_host/docs/introduction redirect;
  }

  location / {
    try_files $uri $uri/ =404;
  }
}


upstream funfun {
   server 178.62.87.72:443;
}


server {
    listen              443 ssl;
    ssl_certificate     /etc/letsencrypt/live/www.mywebsite.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/www.mywebsite.com/privkey.pem;
    server_name www.mywebsite.com;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;
    ssl_session_timeout 1d;
    ssl_stapling on;
    ssl_stapling_verify on;
    add_header Strict-Transport-Security max-age=15768000;
    add_header X-Frame-Options "";

    proxy_ssl_name "www.funfun.io";
    proxy_ssl_server_name on;
   
    location ~ /auth/(.*) {                                                                                            
          proxy_pass  https://funfun/mywebsite/auth/$1?$query_string;
          proxy_set_header Host www.mywebsite.com;
    }

    location / {
        proxy_set_header    Host                $host;
        proxy_set_header    X-Forwarded-For     $proxy_add_x_forwarded_for;
        proxy_set_header    X-Forwarded-Proto   $scheme;
        proxy_set_header    Accept-Encoding     "";
        proxy_set_header    Proxy               "";
        proxy_pass          http://docusaurus:3002/;

        # These three lines added as per https://github.com/socketio/socket.io/issues/1942 to remove socketio error
        proxy_http_version 1.1;
        proxy_set_header   Upgrade $http_upgrade;
        proxy_set_header   Connection "upgrade";
    }
}

server {
    listen 443 ssl;
    server_name mywebsite.com;
    ssl_certificate /etc/letsencrypt/live/mywebsite.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/mywebsite.com/privkey.pem;

    # Additional SSL settings (same as your existing www server block)
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;
    ssl_session_timeout 1d;
    ssl_stapling on;
    ssl_stapling_verify on;

    return 301 https://www.mywebsite.com$request_uri;
}

server {
    listen 80;
    server_name mywebsite.com;

    return 301 https://www.mywebsite.com$request_uri;
}

[Josh-Cena]

You can't just set trailingSlash to anything and expect things to work—you have to make sure your server is properly set up to handle that route. This config is exactly invented to mirror your server's capabilities. If it works with trailingSlash: true but not false, it means you should use trailingSlash: true, unless you really want to make the other work ;)

[chengtie]

Hi @Josh-Cena ,

Thank you for your reply.

I really want to make trailingSlash: false work for a better SEO strategy. I think Nginx configuration needs to be adjusted. Do you know how?

Tie