Next JS Links sending users to wrong page on Firebase Hosting

Question

Background: I am using NextJS hosted on Firebase hosting. My pages all have a Navbar component with an "Account" button. The button is a NextJS Link with href="/account".

When testing locally, it works fine (sends the user to "/account"). When testing on my Firebase-hosted site, clicking the link sends me to "/acc" instead of "/account". The bizarre thing is, hovering over the Account button on Chrome, you can see the redirect URL on the bottom left of the page, and if you right-click the account button and copy link address, they both show the link /account.

I'm trying to figure this out, so please help me!

Navbar component:

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>
  );
}

My next config file:

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

module.exports = nextConfig;

My firebase.json file:

{
  "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"
    }
  }
}

What am I doing wrong?

Answer 1

I took @Doug Stevenson (in the comments) suggestion to create a brand new project, pasted my existing code in, and it works fine.

For future reference, if anyone runs into this, just recreate your project. Took < 5 min to copy everything over