How to add default language key as prefix when loading the website?

[SamnnyWong]

Currently, I am trying to implement i18n into my gatsby static website, after implement the gatsby-plugin-i18n plugin into the project I noticed that the website will not add the default langkey '/en/' right after I type in http://localhost:8001/ in the browser's address bar. Below is my set up inside gatsby-config.js

 plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: 'gatsby-plugin-i18n',
      options: {
        langKeyForNull: 'any',
        langKeyDefault: languages.defaultLangKey,
        useLangKeyLayout: true,
        prefixDefault: true,
      }
    },
    ],
}

I also added the file gatsby-browser.js manually in the project root directory and setit up as follow:

exports.onClientEntry = () => {
    if (window.location.pathname === '/') {
        window.location.pathname = `/en`
    }
}

But it still doesnt work. My expected behavior for the website is that it will add the langkey prefix for my url http://localhost:8000/en/, I was looking for how to redirect http://localhost:8000/ to http://localhost:8000/en/ with gatsby.js but I had a hunch that is not the proper way to implement this. Thanks in advance.

[itfarrier]

@SamnnyWong, please, see https://github.com/itfarrier/podabed.github.io/blob/source/src/pages/index.tsx. This is an old ugly solution.

[mimranfaruqi]

I have the same problem with the plugin. I followed the instructions. The pages are generated as suggested there, but they never mentioned how can I actually reroute to the default page or how this will actually detect the locale of the website and redirect accordingly.