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!