导出静态 HTML 后 Next.JS 链接不起作用

Question

我是 NEXT.JS 的新手，在部署静态站点时遇到一些问题。Nav.tsx我有一个如下所示的组件：

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;

当我在本地运行开发服务器时，我可以使用这些链接在我的网站上导航。但是当我构建时，使用next build && next export链接不适用于导航。所有这些链接（/about、/services、/contact）都是我的目录中的文件pages。我是否在 中写了一些不正确的内容Nav.tsx，或者我误解了 NEXT 的工作原理？谢谢你！

Answer 1

更新2022-02-14

这可以通过{trailingSlash: true}在next.config.js. 请参阅如何处理 NextJS 导出带有 .html 扩展名的文件，但在 <Link> 中没有 .html了解详细信息。

原始答案（不起作用）

我最近遇到了同样的问题，发现可以通过将其他非索引页面（例如移动pages/search.js到pages/search/index.js. 无需通过黑客攻击.htaccess等。

但是，您需要更新相对导入，以便 Next.js 仍然能够编译，例如：

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

到

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