Next.JS links do not work after exporting static HTML

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>
                <h2 className='pointer my-auto'>Blog </h2>
            </Link>
            <Link href='/about' passHref>
                <p className='ms-5 pointer lead my-auto'>Who We Are</p>
            </Link>
            <Link href='/services' passHref>
                <p className='ms-5 pointer lead my-auto'>Services</p>
            </Link>
            <Link href='/contact' passHref>
                <p className='ms-5 pointer lead my-auto'>Contact</p>
            </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!