exportTrailingSlash: true not working as expected - links do not access .html address-CodePudding

I am using nextjs and I am trying to do a static export.

I have configured the next.config.js file as follows:

module.export = {
    exportTrailingSlash: true,
}

When I develop I am writing the links without the sufix. For exemple, the header menu:

        <Navbar bg="" expand="lg">
            <Navbar.Brand href="/">
                <h1 className="font-header-logo">Natural Bela</h1>
            </Navbar.Brand>
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse id="basic-navbar-nav">
                <Nav>
                    <Nav.Link title="Página Inicial" className="mr-auto" href="/">Principal</Nav.Link>
                    <Nav.Link title="Cuidados com as unhas" href="/menu_unhas">Unhas</Nav.Link>
                    <Nav.Link title="Aprenda sobre maquiagem" href="/menu_maquiagem">Maquiagem</Nav.Link>
                    <Nav.Link title="Cursos Recommendados" href="/cursos_recomendados">Cursos Recomendados</Nav.Link>
                    <Nav.Link title="Fale conosco" href="/contato">Contato</Nav.Link>
                    
                </Nav>
            </Navbar.Collapse>
        </Navbar>

The package.json is set as follows:

{
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "export": "next build && next export",
    "start": "next start"
  },
  "dependencies": {
    "aos": "^2.3.4",
    "bootstrap": "^4.6.1",
    "next": "latest",
    "next-seo": "^5.1.0",
    "react": "^17.0.2",
    "react-bootstrap": "^1.6.4",
    "react-dom": "^17.0.2",
    "react-native": "^0.67.3",
    "use-count-up": "^3.0.1"
  }
}

When I run npm run dev, the website runs fine, however when I run npm run export, I get the static website but its links are not working.

For example, if I press "Maquiagem" button, it directs me to http://localhost/menu_maquiagem, but the page now is http://localhost/menu_maquiagem.html.

I have seen some questions about it and the answer is always that we have to set exportTrailingSlash: true, however I have done that and still get it wrong.

What am I doing wrong?

CodePudding user response：

I believe it's now recommended to use trailingSlash instead of exportTrailingSlash:

if you want to force trailing slashes the recommendation is to just use trailingSlash: true both in dev/prod as both environment can route correctly since 9.5. Previously exportTrailingSlash would break development.

https://github.com/vercel/next.js/discussions/15598#discussioncomment-43808

It also looks like you have a typo in your next.config.js file: it should be module.exports (with an "s" at the end).