Strange reaction in localhost with Next JS

2 years ago

#73849

jipay

I have a problem with the localhost of Nextjs and I can't find the cause. The problem is the following: the links of my pages display a 404 page, unless I remove its .html extension manually in the address bar. But only in localhost. The pages work perfectly online. HTML extension that Nextjs adds automatically.

If I change the next-config by adding the .html extension, it is the opposite. It works in localhost but not online. If I remove the .html in the navigation menu, it works well in localhost, but does not find the pages online anymore...

Someone can help me please?

my next-js file :

module.exports = {
  trailingSlash: true,
  exportPathMap: async function (
    defaultPathMap,
    { dev, dir, outDir, distDir, buildId }
  ) {
    return {

      '/fr/index': { page: '/fr' },

      '/': { page: '/' },
      '/en/the-school': { page: '/en/the-school' },
      '/en/admission': { page: '/en/admission' },
      '/en/events': { page: '/en/events' },
      '/en/school-life': { page: '/en/school-life' },
      '/en/partners': { page: '/en/partners' },
      '/en/contact': { page: '/en/contact' },

    }
  },
}

my nav menu :

import React from 'react'

export default function NavMenu (props) {

    return (

    <header className="main-header">
        <div className="container">
            <div className="nav-content">
                <a href="/" className={props.logo}>Home</a>
                <nav className="main-nav">
                    <button className="toggle-menu" aria-expanded="false" aria-controls="menu"><span
                            className="screen-reader-text">Menu</span></button>
                    <ul className="menu" id="menu" hidden>
                        <li className="menu-item"><a href="/">Home</a></li>
                        <li className="menu-item"><a href="/en/the-school.html">The School</a></li>
                        <li className="menu-item"><a href="/en/admission.html">Admission</a></li>
                        <li className="menu-item"><a href="/en/partners.html">Partners</a></li>
                        <li className="menu-item"><a href="/en/contact.html">Contact</a></li>
                        <li className="menu-item language"><a href="/fr/index.html">FR</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>
  )
}

html

next.js

localhost

0 Answers

Your Answer

Posts

Questions

Blogs

Jobs