Next JS 链接将用户发送到 Firebase 托管上的错误页面

Question

背景：我正在使用 Firebase 托管上托管的 NextJS。我的页面都有一个带有“帐户”按钮的导航栏组件。该按钮是一个带有 href="/account" 的 NextJS 链接。

在本地测试时，它工作正常（将用户发送到“/account”）。在我的 Firebase 托管网站上进行测试时，点击链接会将我转到“/acc”而不是“/account”。奇怪的是，将鼠标悬停在 Chrome 上的帐户按钮上，您可以在页面左下角看到重定向 URL，如果您右键单击帐户按钮并复制链接地址，它们都会显示链接 /account。

我正在想办法解决这个问题，所以请帮助我！

导航栏组件：

export default function Navbar({
  currentUser,
  handleSignOut,
  handleSignIn,
}: NavbarProps) {
  return (
    <div className="w-full h-20 flex justify-between items-center px-5 fixed top-0">
      <div className="flex-shrink-0 h-full">
        <Link href="/">
          <div className="h-full w-48 relative">
            <Image
              src="/white.png"
              alt="Logo"
              layout="fill"
              style={{ objectFit: "contain", objectPosition: "left" }}
            />
          </div>
        </Link>
      </div>
      <div className="flex gap-4">
        {currentUser ? (
          <>
            <Link
              href="/account"
              as={"/account"}
              className="bg-white text-black py-2 px-5 rounded-lg hover:bg-gray-200 font-bold font-roboto-flex-bold"
              onClick={(e) => {
                console.log(
                  "Account link clicked, href:",
                  e.currentTarget.href
                );
              }}
            >
              Account
            </Link>
            <button
              onClick={() => {
                handleSignOut();
              }}
              className="bg-none text-white py-2 px-5 rounded-lg font-bold font-roboto-flex-bold"
            >
              Sign Out
            </button>
          </>
        ) : (
          <>
            <button
              onClick={() => {
                handleSignIn();
              }}
              className="bg-white text-black py-2 px-5 rounded-lg hover:bg-gray-200 font-bold font-roboto-flex-bold"
            >
              Sign Up
            </button>
            <button
              onClick={() => {
                handleSignIn();
              }}
              className="bg-none text-white py-2 px-5 rounded-lg font-bold font-roboto-flex-bold"
            >
              Login
            </button>
          </>
        )}
      </div>
    </div>
  );
}

我的下一个配置文件：

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "export",
  images: {
    unoptimized: true,
  },
  trailingSlash: true,
};

module.exports = nextConfig;

我的 firebase.json 文件：

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "functions": [
    {
      "source": "functions",
      "codebase": "default",
      "ignore": [
        "node_modules",
        ".git",
        "firebase-debug.log",
        "firebase-debug.*.log",
        "*.local"
      ]
    }
  ],
  "hosting": {
    "source": "frontend",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "frameworksBackend": {
      "region": "us-central1"
    }
  }
}

我做错了什么？

Answer 1

我采纳了@Doug Stevenson（在评论中）的建议来创建一个全新的项目，粘贴我现有的代码，并且工作正常。

为了将来的参考，如果有人遇到这个问题，只需重新创建您的项目即可。拿了< 5 min to copy everything over