Next.JS links do not work after exporting static HTML

Question

I am new to NEXT.JS and I am having some trouble deploying a static site. I have a component Nav.tsx that looks like this:

const Nav = () => {
    return (
        <nav className='nav p-3 border-bottom'>
            <Link href='/' passHref>
                <a className='pointer my-auto h2'>Blog </a>
            </Link>
            <Link href='/about' passHref>
                <a className='ms-5 pointer lead my-auto'>Who We Are</a>
            </Link>
            <Link href='/services' passHref>
                <a className='ms-5 pointer lead my-auto'>Services</a>
            </Link>
            <Link href='/contact' passHref>
                <a className='ms-5 pointer lead my-auto'>Contact</a>
            </Link>
        </nav>
    );
};
export default Nav;

When I run my development server locally, I can use those links to navigate around my site. But when I build, using next build && next export the links do not work for navigation. All of those links (/about, /services, /contact) are files in my pages directory. Have I written something incorrect in Nav.tsx, or am I misunderstanding how NEXT works? Thank you!

Answer 1

Update 2022-02-14

This can be solved by applying {trailingSlash: true} inside the next.config.js. See How to deal with NextJS exporting files with .html extension but in<Link> there is no .html for details.

Original answer (which does NOT work)

I encountered the same problem very recently and found out that this can be solved by moving other non-index pages such as pages/search.js into pages/search/index.js. No need for hacking via .htaccess and so on.

However, you'll need to update your relative imports so Next.js will still be able to compile, such as:

import styles from '../styles/Home.module.css';

to

import styles from '../../styles/Home.module.css';