链接不适用于 Next.js 和 Github Pages

我最近关注了一个关于使用 React 和 Next.js 构建单页投资组合的教程，它在本地开发中运行良好。

但是，当我将它部署到 Github 页面时，内部链接停止工作。

    <PrefixedLink href="#about">
      <NavLink>About Me</NavLink>
    </PrefixedLink>

我已经尝试了以下在线建议：添加 next.config.js（这确实修复了从公共文件夹加载图像） - 我的看起来像这样：

const pathPrefix = process.env.NODE_ENV === 'production'
? '/React-Portfolio'
: '';

module.exports = {
    assetPrefix: pathPrefix,
    basepatch: "/React-Portfolio",
    env: {
        pathPrefix,
    },
};

还有人建议为所有链接添加前缀，因为 github 页面在路径中有项目名称，所以我有这个：

import Link from 'next/link';

const PrefixedLink = ({ href, as = href, children, ...props }) => (
    <Link
        href={href}
        as={`${process.env.pathPrefix}${as}`}
        {...props}
    >
        {children}
    </Link>
);

export default PrefixedLink;

但这也行不通。

在生产现场，最终结果如下所示：

<a class="HeaderStyles__NavLink-sc-9w0vkp-5 jlNUaI">About Me</a>

没有任何 href="#about"，但如果我通过检查器手动添加它，它工作正常。

编辑摆脱并将 href 添加到 NavLink（自定义标签）修复了该问题。