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!
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.
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';