SSG (HTML export) + i18n (necessary trailing slashes on dynamic routes?)

[soykje]

Hello everyone! 👋

I've been working on my website, to make it support multilingual content. In order to achieve this goal, I used (like a few others...) the React Context API, and then implementing my LocaleProvider in my _app.js:

import App from 'next/app'
import { ThemeProvider, createGlobalStyle } from 'styled-components'
import { LocaleProvider } from '@utils/locale'

import defaultTheme from '@styles/theme'
import '@styles/reset.scss'

export default class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props

    return (
      <ThemeProvider theme={defaultTheme}>
        <LocaleProvider lang={pageProps.lang}>
          <Component {...pageProps} />
        </LocaleProvider>
      </ThemeProvider>
    )
  }
}

My pages folder structures also looks like this:

pages
  |-[lang]
    |-index.js
    |-blog
      |-[slug].js
      |-index.js
    |-...
  |-_app.js
  |-_document.js
  |-index.js

You can check the complete work here.

My last point of interest was on static HTML export: every pages were rendered correctly, but I noticed a few problems:

• on page reload, a final trailing slash was automatically added (without any configuration of mine), causing 404
• on Twitter Card Validator and GT Metrix, come pages appeared as 503

My first thought was my recent upgrade to NextJS 9.5 (with the famous trailingSlash feature), but even after downgrading the problem was still here... And finally, it seems that declaring the trailingSlash: true solved my problem!

Everything works fine now (thanks to the dev/next community...), but I stay with that question: why do I have to use this option to make my website working? Am I constraint to use trailing slashes on static exports using dynamic routes ([lang], [slug])?

I'll be very happy to discuss with you, in order to understand the reason of this trailing slash necessity (how did other devs do before Next 9.5??) 🙂