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

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 更新

这可以通过在next.config.js 中应用{trailingSlash: true} 来解决。详情请见How to deal with NextJS exporting files with .html extension but in<Link> there is no .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';