Exploring the world of NEXT.JS for the first time and encountering challenges with deploying a static site. In my component Nav.tsx, I have the following structure:
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;
During local server development, I can navigate using these links smoothly. However, after building and exporting using
next build && next export/about, /services, /contact) are all present in the pages directory. Am I missing a key detail in Nav.tsx or is there a fundamental misunderstanding of how NEXT.JS operates? Any help would be greatly appreciated!